@hostlink/nuxt-light 1.13.7 → 1.14.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.13.7",
+  "version": "1.14.1",
   "builder": {
     "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.0.0"

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

@@ -1,18 +1,18 @@
 <script setup>
 import { useRoute, useRouter } from 'vue-router';
 import { useLight, q, m } from "#imports";
-import { useQuasar, Loading } from 'quasar';
+import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { ref, computed, reactive, provide, watch, toRaw } from 'vue';
 import { useRuntimeConfig } from 'nuxt/app';
 
-Loading.show()
+const $q = useQuasar();
+$q.loading.show()
 
 const config = useRuntimeConfig();
 
 const appVersion = config.public.appVersion ?? '0.0.1';
 
-const quasar = useQuasar();
 const tt = await q({
     system: {
         devMode: true,
@@ -74,7 +74,7 @@ const myFavoritesCount = computed(() => {
     return light.getMyFavorites().length;
 });
 
-quasar.dark.set(light.isDarkMode());
+$q.dark.set(light.isDarkMode());
 
 const i18n = useI18n();
 i18n.locale = my.language || 'en';
@@ -172,7 +172,7 @@ watch(() => style.dense, async (value) => await light.setStyle("dense", value))
 
 
 watch(() => light.theme, async () => {
-    quasar.dark.set(light.isDarkMode());
+    $q.dark.set(light.isDarkMode());
 })
 
 watch(() => style.miniState, async (value) => {
@@ -228,7 +228,7 @@ const onToggleFav = async () => {
         return;
     }
 
-    quasar.dialog({
+    $q.dialog({
         title: 'Add to favorite',
         message: 'Enter favorite label',
         prompt: {
@@ -257,7 +257,7 @@ const isFav = computed(() => {
     return fav;
 })
 
-Loading.hide()
+$q.loading.hide()
 
 const menuWidth = ref(my.styles.menuWidth || 280);
 
@@ -306,7 +306,7 @@ if (route.fullPath == "/" && my.default_page) {
                     </q-tooltip>
                 </q-btn>
 
-                <q-btn v-if="languages.length > 1" round flat icon="language" class="q-mr-xs">
+                <q-btn v-if="languages.length > 1" round flat dense icon="language" class="q-mr-xs">
                     <q-tooltip>
                         {{ my.language }}
                     </q-tooltip>
@@ -334,8 +334,11 @@ if (route.fullPath == "/" && my.default_page) {
                         {{ my.first_name }} {{ my.last_name }}
                     </div>
 
-                    <div class="text-right">
-                        {{ my.roles[0] }}
+                    <div class="text-right ellipsis" style="max-width: 120px;">
+                        {{ my.roles.join(", ") }}
+                        <q-tooltip>
+                            {{ my.roles.join(", ") }}
+                        </q-tooltip>
                     </div>
                 </div>
 
@@ -430,7 +433,7 @@ if (route.fullPath == "/" && my.default_page) {
                 </template>
             </router-view -->
             <NuxtLoadingIndicator />
-            
+
             <NuxtPage />
 
 

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useLight } from '#imports';
+import type { QBarProps } from 'quasar';
+import { computed } from 'vue';
+
+export type LBarProps = QBarProps;
+
+const light = useLight();
+const barClass = computed(() => {
+    const c = ["text-white"];
+    const color = light.color;
+    c.push(`bg-${color}`);
+    return c;
+});
+</script>
+
+<template>
+    <q-bar :class="barClass">
+        <slot></slot>
+    </q-bar>
+</template>

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

@@ -4,7 +4,7 @@ import { computed } from "vue";
 import { useLight } from '#imports';
 import { useI18n } from "vue-i18n";
 
-export interface LBtnProps extends QBtnProps {
+export interface LBtnProps extends  QBtnProps {
     permission?: string;
 }
 

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

@@ -8,7 +8,7 @@ const emit = defineEmits(["close"]);
 const minimized = defineModel<boolean>("minimized", { default: false })
 const maximized = defineModel<boolean>("maximized", { default: false })
 
-export interface LCardProps extends QCardProps {
+export interface LCardProps extends  QCardProps {
     loading?: boolean;
     title?: string;
     /**

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

@@ -2,7 +2,7 @@
 import { computed } from "vue"
 import { type QCheckboxProps } from "quasar"
 
-export interface LCheckboxProps extends QCheckboxProps {
+export interface LCheckboxProps extends  QCheckboxProps {
 }
 
 const emit = defineEmits(["update:modelValue"]);

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

@@ -75,11 +75,24 @@ const props = defineProps({
 const time_diff = ref(new Date().getTime() - new Date(props.time).getTime());
 const server_time = ref(new Date(props.time).toLocaleTimeString());
 const server_date = ref(new Date(props.time).toLocaleDateString());
+let start;
 
-setInterval(() => {
-    server_time.value = new Date(new Date().getTime() - time_diff.value).toLocaleTimeString();
-    server_date.value = new Date(new Date().getTime() - time_diff.value).toLocaleDateString();
-}, 500);
+const refreshServerTime = (timestamp) => {
+    if (!start) start = timestamp;
+    let elapsed = timestamp - start;
+
+
+    if (elapsed > 1000) {
+        server_time.value = new Date(new Date().getTime() - time_diff.value).toLocaleTimeString();
+        server_date.value = new Date(new Date().getTime() - time_diff.value).toLocaleDateString();
+        start = timestamp;
+    }
+
+    //refresh every second
+    requestAnimationFrame(refreshServerTime);
+}
+
+requestAnimationFrame(refreshServerTime);
 
 
 </script>
@@ -132,7 +145,8 @@ setInterval(() => {
                 <q-item-label>Menu dense mode</q-item-label>
             </q-item-section>
             <q-item-section side>
-                <q-toggle :model-value="dense" @update:model-value="$emit('update:dense', $event)" :color="$light.color" />
+                <q-toggle :model-value="dense" @update:model-value="$emit('update:dense', $event)"
+                    :color="$light.color" />
             </q-item-section>
         </q-item>
 
@@ -143,8 +157,8 @@ setInterval(() => {
                 <q-item-label>Menu overlay header</q-item-label>
             </q-item-section>
             <q-item-section side>
-                <q-toggle :model-value="menuOverlayHeader" @update:model-value="$emit('update:menuOverlayHeader', $event)"
-                    :color="$light.color" />
+                <q-toggle :model-value="menuOverlayHeader"
+                    @update:model-value="$emit('update:menuOverlayHeader', $event)" :color="$light.color" />
             </q-item-section>
         </q-item>
 

package/dist/runtime/components/l-dialog-database-field-add.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar'
+
+const props = defineProps({
+    // ...your custom props
+})
+
+defineEmits([
+    // REQUIRED; need to specify some events that your
+    // component will emit through useDialogPluginComponent()
+    ...useDialogPluginComponent.emits
+])
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
+// dialogRef      - Vue ref to be applied to QDialog
+// onDialogHide   - Function to be used as handler for @hide on QDialog
+// onDialogOK     - Function to call to settle dialog with "ok" outcome
+//                    example: onDialogOK() - no payload
+//                    example: onDialogOK({ /*...*/ }) - with payload
+// onDialogCancel - Function to call to settle dialog with "cancel" outcome
+
+// this is part of our example (so not required)
+function onOKClick(value) {
+    // on OK, it is REQUIRED to
+    // call onDialogOK (with optional payload)
+    onDialogOK(value)
+    // or with payload: onDialogOK({ ... })
+    // ...and it will also hide the dialog automatically
+}
+
+const types = ["varchar", "int", "date", "time", "datetime", "timestamp", "text", "blob", "json", "jsonb", "uuid", "boolean", "decimal", "float", "double", "real", "numeric", "smallint", "bigint", "tinyint", "mediumint", "char", "binary", "varbinary", "enum"]
+</script>
+
+
+<template>
+    <q-dialog ref="dialogRef" @hide="onDialogHide">
+        <q-card class="q-dialog-plugin">
+            <l-bar>
+                <q-space />
+                <q-btn dense flat icon="sym_o_close" @click="onDialogCancel" />
+            </l-bar>
+            <form-kit type="l-form" @submit="onOKClick" :value="{
+                name: '',
+                type: '',
+                length: '',
+                default: '',
+                nullable: false,
+                autoincrement: false
+            }">
+                <form-kit type="l-input" name="name" label="Name" validation="required" />
+                <form-kit type="l-select" name="type" label="Type" :options="types" validation="required" />
+                <form-kit type="l-input" name="length" label="Length" />
+                <form-kit type="l-input" name="default" label="Default" />
+                <form-kit type="l-checkbox" name="nullable" label="Nullable" />
+                <form-kit type="l-checkbox" name="autoincrement" label="Autoincrement" />
+            </form-kit>
+
+
+        </q-card>
+    </q-dialog>
+</template>

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

@@ -27,7 +27,7 @@ const TextHightlightCMD = ((cmd, name) => {
     edit.focus()
 })
 
-export interface LEditorProps extends QEditorProps {
+export interface LEditorProps extends  QEditorProps {
 }
 
 const emit = defineEmits(["update:modelValue"]);

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

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useQuasar } from "quasar";
@@ -28,12 +28,17 @@ const props = defineProps({
     submitIcon: {
         type: String,
         default: "sym_o_save"
+    },
+    noRedirect: {
+        type: Boolean,
+        default: false
     }
+
 });
 
 const loading = ref(false)
 
-const emit = defineEmits(["save", "submit"]);
+const emit = defineEmits(["save", "submit", "submitted"]);
 const save = async () => {
 
     let valid = await form.value.validate();
@@ -50,12 +55,23 @@ const save = async () => {
         try {
             if (route.params[id_name]) {//edit
                 if (await model(module).update(parseInt(route.params[id_name]), props.modelValue)) {
-                    router.push(`/${module}`);
+
+                    if (!props.noRedirect) {
+                        router.push(`/${module}`);
+                    }
+
+                    emit('submitted');
+
                     return;
                 }
             } else {
                 if (await model(module).add(props.modelValue)) {
-                    router.push(`/${module}`);
+
+                    if (!props.noRedirect) {
+                        router.push(`/${module}`);
+                    }
+
+                    emit('submitted');
                     return;
                 }
             }
@@ -78,7 +94,7 @@ const onSubmit = (e) => {
 </script>
 <template>
     <q-form ref="form" @submit="onSubmit">
-        <l-card :bordered="bordered" >
+        <l-card :bordered="bordered">
             <q-card-section>
                 <div :class="`q-gutter-${gutter}`">
                     <slot></slot>

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

@@ -5,7 +5,7 @@ import tc2sc from "../lib/tc2sc";
 import { useLight } from '#imports';
 
 import type { QInputProps } from "quasar";
-export interface LInputProps extends QInputProps {
+export interface LInputProps extends  QInputProps {
     showPassword?: boolean;
     translate?: boolean;
     required?: boolean;

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { QItemProps } from 'quasar';
 
-export interface LItemProps extends QItemProps {
+export interface LItemProps extends  QItemProps {
     label?: string;
     type?: 'text' | 'caption';
     name?: string;

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

@@ -2,7 +2,7 @@
 
 import type { QListProps } from 'quasar';
 
-export interface LListProps extends QListProps {
+export interface LListProps extends  QListProps {
     fields?: any[];
     modelValue?: any;
 }

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

@@ -1,12 +1,11 @@
 <script setup>
 import { useLight } from "#imports";
 import { ref, reactive, onMounted } from 'vue'
-import { useQuasar, Dialog } from 'quasar';
+import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { m, notify, api } from '#imports';
 
 
-
 const light = useLight();
 
 const props = defineProps({
@@ -20,7 +19,7 @@ const data = reactive({
   username: "", password: "", code: ""
 });
 
-const qua = useQuasar()
+const $q = useQuasar()
 
 const submit = async () => {
   if (await form1.value.validate()) {
@@ -36,83 +35,70 @@ const submit = async () => {
 }
 
 const forgetPassword = async () => {
-  Dialog.create({
+  $q.dialog({
     title: i18n.t("Forget password"),
     message: "Please enter your email address, we will send you a code to reset your password",
     prompt: {
-      model: "",
       type: "email",
+      required: true,
+      isValid: (val) => {
+        //test val is email
+        const re = /\S+@\S+\.\S+/;
+        return re.test(val);
+      }
     },
     cancel: true
   }).onOk(async email => {
-    if (email.length == 0) {
-      return;
-    }
-
+    $q.loading.show();
     try {
-      await m("forgetPassword", { email: email });
-      qua.dialog({
-        title: "Enter your code",
-        message: "Please enter the code sent to your email, your code will expire in 10 minutes",
-        prompt: {
-          model: "",
-          type: "text"
-        },
-        cancel: true,
-        persistent: true
-      }).onOk(async code => {
-        if (code.length == 0) {
-          return;
-        }
-
-        if (await m("verifyCode", { code: code, email: email })) {
-          qua.dialog({
-            title: "Reset password",
-            message: "Please enter your new password",
-            prompt: {
-              model: "",
-              type: "password"
-            },
-          }).onOk(async password => {
-            if (password.length == 0) {
-              return;
-            }
-
-            if (await m("resetPassword", { password: password, email: email, code: code })) {
-              qua.notify({
-                message: "Your password has been reset successfully",
-                color: "positive",
-                icon: "sym_o_check",
-                position: "top",
-                timeout: 2000
-              });
-            }
-          });
-        } else {
-          qua.notify({
-            message: "Your code is invalid",
-            color: "negative",
-            icon: "sym_o_error",
-            position: "top",
-            timeout: 2000
-          });
-
-        }
-
-
-      });
+      await api.auth.forgetPassword(email);
     } catch (e) {
-      qua.notify({
+      $q.notify({
         message: e.message,
         color: "negative",
         icon: "sym_o_error",
-        position: "top",
-        timeout: 2000
       });
+      return;
+    } finally {
+      $q.loading.hide();
     }
-  });
-
 
+    $q.dialog({
+      title: "Enter your code",
+      message: "Please enter the code sent to your email, your code will expire in 10 minutes",
+      prompt: {
+        type: "text",
+        required: true
+      },
+      cancel: true,
+      persistent: true
+    }).onOk(async code => {
+      if (await api.auth.verifyCode(email, code)) {
+        $q.dialog({
+          title: "Reset password",
+          message: "Please enter your new password",
+          required: true,
+          prompt: {
+            type: "password"
+          },
+        }).onOk(async password => {
+          if (await api.auth.resetPassword(email, password, code)) {
+            $q.notify({
+              message: "Your password has been reset successfully",
+              color: "positive",
+              icon: "sym_o_check",
+            });
+          }
+        });
+      } else {
+        $q.notify({
+          message: "Your code is invalid",
+          color: "negative",
+          icon: "sym_o_error",
+        });
+      }
+    });
+  });
 };
 
 const hasBioLogin = ref(false);
@@ -122,7 +108,7 @@ if (localStorage.getItem("username")) {
 }
 const bioLogin = async () => {
   try {
-    await webauthnLogin(localStorage.getItem("username"));
+    await api.auth.WebAuthn.login(localStorage.getItem("username"));
     window.self.location.reload();
   } catch (e) {
     notify(e.message, "negative");
@@ -131,7 +117,7 @@ const bioLogin = async () => {
 }
 const handleGoogleCredentialResponse = async (response) => {
   try {
-    await m("googleLogin", { credential: response.credential });
+    await api.auth.googleLogin(response.credential);
     window.self.location.reload();
   } catch (e) {
     notify(e.message, "negative");
@@ -140,15 +126,11 @@ const handleGoogleCredentialResponse = async (response) => {
 
 onMounted(() => {
   if (props.googleClientId) {
-
-
     if (!window.google) {
-      qua.notify({
+      $q.notify({
         message: "Google login is not available", //set script https://accounts.google.com/gsi/client in nuuxt.config.js
         color: "negative",
         icon: "sym_o_error",
-        position: "top",
-        timeout: 2000
       });
       return;
 

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

@@ -9,17 +9,20 @@ const router = useRouter();
 const route = useRoute();
 const light = useLight();
 
-export interface LPageProps extends QPageProps {
+export type LPageProps = QPageProps & {
     title?: string;
     backBtn?: boolean;
     editBtn?: boolean;
     deleteBtn?: boolean;
     addBtn?: boolean;
+    gutter?: string;
+    padding?: boolean
 }
 
 const props = withDefaults(defineProps<LPageProps>(), {
     title: "",
     backBtn: true,
+    padding: true,
 });
 
 const showToolbar = computed(() => {
@@ -49,10 +52,21 @@ const onDelete = async () => {
 useHead({
     title: light.getCompany() + " - " + title,
 })
+
+const localClass = computed(() => {
+    return {
+        "q-gutter-none": props.gutter === "none",
+        "q-gutter-xs": props.gutter === "xs",
+        "q-gutter-sm": props.gutter === "sm",
+        "q-gutter-md": props.gutter === "md",
+        "q-gutter-lg": props.gutter === "lg",
+        "q-gutter-xl": props.gutter === "xl",
+    }
+})
 </script>
 
 <template>
-    <q-page padding>
+    <q-page :padding="props.padding" :class="localClass">
         <!-- q-breadcrumbs>
             <q-breadcrumbs-el icon="home" to="/" />
             <q-breadcrumbs-el label="Permission" to="/Permission" />

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

@@ -8,7 +8,7 @@ const emits = defineEmits(["update:modelValue"]);
 
 const { t } = useI18n();
 const light = useLight();
-interface LSelectProps extends QSelectProps {
+interface LSelectProps extends  QSelectProps {
     required?: boolean,
 }
 

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

@@ -261,6 +261,7 @@ const onRequest = async (p: any) => {
     props.columns?.forEach((col) => {
         if (col.gqlField) {
             builder.add(col.gqlField);
+            return;
         }
 
         if (!col.name) return;
@@ -428,9 +429,10 @@ const onDelete = async (id: any) => {
         table.value.requestServerInteraction();
     }
 }
-
 const attrs = computed(() => {
     return {
+        ...props,
+
         ...{
             dense: light.getStyle("tableDense"),
             flat: light.getStyle("tableFlat"),

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

@@ -2,7 +2,7 @@
 import type { QTabsProps } from 'quasar';
 import { onMounted, useSlots } from '#imports';
 const model = defineModel<string | number | null | undefined>()
-export interface LTabsProps extends QTabsProps {
+export interface LTabsProps extends  QTabsProps {
 }
 defineProps<LTabsProps>();
 const slots = useSlots()

package/dist/runtime/formkit/Form.vue

@@ -23,10 +23,16 @@ let bordered = true;
 if (props.context.bordered !== undefined) {
     bordered = props.context.bordered;
 }
-const loading = ref(false);
+
+let redirect = true;
+if (props.context.attrs.onSubmitted) {
+    redirect = false;
+}
+
+
 if (!props.context.onSubmit) {
     props.context.node.props.onSubmit = async function () {
-        loading.value = true;
+
         const [module, id_name] = route.name.split("-");
 
 
@@ -46,8 +52,9 @@ if (!props.context.onSubmit) {
                         color: "positive",
                         icon: "sym_o_check"
                     });
-                    router.go(-1);
-                    return;
+                    if (redirect) {
+                        router.go(-1);
+                    }
                 }
             } else {
                 if (await model(module).add(v)) {
@@ -56,10 +63,16 @@ if (!props.context.onSubmit) {
                         color: "positive",
                         icon: "sym_o_check"
                     });
-                    router.go(-1);
-                    return;
+
+                    if (redirect) {
+                        router.go(-1);
+                    }
                 }
             }
+            //emit submitted event
+            if (props.context.attrs.onSubmitted) {
+                props.context.attrs.onSubmitted(v);
+            }
         } catch (e) {
             quasar.dialog({
                 title: "Error",
@@ -67,7 +80,7 @@ if (!props.context.onSubmit) {
                 ok: "OK"
             });
         }
-        loading.value = false;
+
     }
 
 }
@@ -84,8 +97,8 @@ if (!props.context.onSubmit) {
             </q-card-section>
 
             <q-card-actions align="right">
-                <l-btn icon="sym_o_check" label="Submit" @click="onSubmit" :disabled="!context.state.dirty"
-                    :loading="loading"></l-btn>
+                <l-btn icon="sym_o_check" :label="context.submitLabel ?? 'Submit'" @click="onSubmit"
+                    :disabled="!context.state.dirty" :loading="context.state.loading"></l-btn>
             </q-card-actions>
         </l-card>
     </form>

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

@@ -1,24 +1,143 @@
 <script setup>
-import { api } from '#imports';
+import { api, m } from '#imports';
+import { useQuasar } from 'quasar';
+import { resolveComponent, ref, reactive } from 'vue';
+
+const $q = useQuasar();
 
 const { system: { database } } = await api.query({
     system: {
         database: {
-            table: true
+            table: true,
+            version: true
         }
     }
 })
 
+const tables = ref(database.table);
+
+const refresh = async () => {
+    const { system: { database } } = await api.query({
+        system: {
+            database: {
+                table: true,
+                version: true
+            }
+        }
+    })
+    tables.value = database.table;
+}
+
+
+const field_add = resolveComponent('l-dialog-database-field-add');
+const add = async (table) => {
+    $q.dialog({
+        component: field_add
+    }).onOk(async (data) => {
+        //data.name
+        //data.type
+        try {
+            const addDatabaseField = await m("addDatabaseField", {
+                table,
+                field: data.name,
+                type: data.type,
+                length: data.length,
+                default: data.default,
+                nullable: data.nullable,
+                autoincrement: data.autoincrement
+            })
+            $q.notify({
+                type: 'positive',
+                message: addDatabaseField
+            })
+
+            refresh();
+
+        } catch (e) {
+            $q.notify({
+                type: 'negative',
+                message: e.message
+            })
+        }
+    })
+
+}
+
+const selected = reactive({});
+
+for (let table of database.table) {
+    selected[table.name] = [];
+}
+
+
+const removeField = async (table) => {
+    //confirmation
+
+    $q.dialog({
+        title: 'Remove field',
+        message: 'Are you sure you want to remove the selected fields?',
+        ok: 'Yes',
+        cancel: 'No'
+    }).onOk(async () => {
 
+
+        //map selected fields
+
+        const fields = selected[table].map(field => field.Field)
+
+        try {
+            const removeDatabaseFields = await m("removeDatabaseFields", {
+                table,
+                fields: fields
+            })
+            $q.notify({
+                type: 'positive',
+                message: removeDatabaseFields
+            })
+
+            selected[table] = [];
+
+            refresh();
+        } catch (e) {
+            $q.notify({
+                type: 'negative',
+                message: e.message
+            })
+        }
+    })
+
+
+
+
+
+
+}
 </script>
 <template>
-    <l-page>
+    <l-page gutter="sm">
+        <l-card>
+            <l-list>
+                <l-item label="Version">{{ database.version }}</l-item>
+            </l-list>
+        </l-card>
+
         <q-card flat bordered>
             <q-list class="rounded-borders" separator bordered>
-                <q-expansion-item :label="table.name" v-for="table in database.table" dense>
+                <q-expansion-item :label="table.name" v-for="table in tables" dense>
+                    <q-toolbar>
+                        <q-btn icon="sym_o_add" @click="add(table.name)" round flat size="sm">
+                            <q-tooltip>Add field</q-tooltip>
+                        </q-btn>
+                        <q-btn icon="sym_o_delete" @click="removeField(table.name)" round flat size="sm"
+                            :disable="selected[table.name].length == 0">
+                            <q-tooltip>Remove field</q-tooltip>
+                        </q-btn>
+                    </q-toolbar>
                     <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-table row-key="Field" separator="cell" dense :rows="table.columns"
+                            :rows-per-page-options="[0]" hide-pagination flat bordered selection="multiple"
+                            v-model:selected="selected[table.name]">
+                        </q-table>
                     </div>
 
                 </q-expansion-item>

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

@@ -2,9 +2,10 @@
 import { list, m } from '#imports'
 import { useRouter } from "vue-router"
 import { ref, computed } from "vue"
-import { Dialog } from 'quasar'
+import { useQuasar } from 'quasar'
+const $q = useQuasar()
 
-let { data: users } = await list("User", null, ["user_id", "username", "name", "roles"]);
+let { data: users } = await list("User", null, ["user_id", "username", "name", "roles", "email"]);
 
 let columns = [
     {
@@ -19,6 +20,12 @@ let columns = [
         field: "name",
         align: "left",
     }, {
+        name: "email",
+        label: "Email",
+        align: "left",
+        field: "email"
+    },
+    {
         name: "roles",
         label: "Roles",
         align: "left",
@@ -30,17 +37,14 @@ let columns = [
     }
 ]
 
-const router = useRouter();
 const onCickView = async (id) => {
     try {
         if (await m("viewAs", { user_id: id })) {
-
             //redirect to last path
             window.location.reload();
-
         }
     } catch (e) {
-        Dialog.create({
+        $q.dialog({
             title: "Error",
             message: e.message,
             color: "negative",
@@ -62,11 +66,11 @@ const filtered = computed(() => {
 </script>
 <template>
     <l-page class="q-gutter-md">
-        <q-banner >
+        <q-banner>
             Use this page to view the system as another user. This is useful for testing permissions.
         </q-banner>
 
-        <q-table flat :columns="columns" :rows="filtered" :rows-per-page-options="[0]" dense>
+        <q-table flat :columns="columns" :rows="filtered" :rows-per-page-options="[0]" dense bordered="">
             <template v-slot:top-right>
                 <q-input outlined dense debounce="300" v-model="filter" placeholder="Search" clearable>
                     <template v-slot:append>

package/dist/runtime/pages/User/_user_id/edit.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 import { getObject, q } from '#imports'
 const obj = reactive(await getObject(["username", "first_name", "last_name", "email", "phone",
     "addr1", "addr2", "addr3", "join_date", "expiry_date", "status", "language", "default_page"
@@ -20,7 +20,6 @@ const languages = tt.app.languages.map((lang) => {
         value: lang.value,
     };
 })
-
 </script>
 
 <template>
@@ -45,7 +44,8 @@ const languages = tt.app.languages.map((lang) => {
                     <FormKit type="l-date-picker" label="Join date" name="join_date" validation="required" />
                     <FormKit type="l-date-picker" label="Expiry date" name="expiry_date" />
                     <FormKit type="l-select" label="Status" name="status" :options="options" validation="required" />
-                    <FormKit type="l-select" label="Language" name="language" :options="languages" validation="required" />
+                    <FormKit type="l-select" label="Language" name="language" :options="languages"
+                        validation="required" />
                     <FormKit type="l-input" label="Default page" name="default_page" />
                 </l-col>
             </l-row>

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

@@ -16,6 +16,8 @@ const columns = model("User").columns({
     has2FA: true,
 })
 
+console.log(columns);
+
 const status = ref("0");
 
 </script>

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

@@ -82,22 +82,14 @@ eventLogCols.forEach(col => {
             </l-col>
 
             <l-col md="8">
-
                 <l-tabs>
-                    <l-tab label="User Log">
-                        <l-table :rows="my.userLog.data" :columns="userlogColumns" searchable
-                            :rows-per-page-options="[0]">
-                        </l-table>
+                    <l-tab label="User Log" name="user_log">
+                        <l-table :rows="my.userLog.data" searchable :columns="userlogColumns" hide-pagination />
                     </l-tab>
-                    <l-tab label="Event Log">
-                        <l-table :rows="my.eventLog.data" :columns="eventLogCols" searchable
-                            :rows-per-page-options="[0]">
-                        </l-table>
+                    <l-tab label="Event Log" name="event_log">
+                        <l-table :rows="my.eventLog.data" :columns="eventLogCols" searchable hide-pagination />
                     </l-tab>
-
                 </l-tabs>
-
-
             </l-col>
         </l-row>
 

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

@@ -1,7 +1,7 @@
 <script setup>
 import { reactive, onMounted, nextTick } from "vue"
 import { useQuasar } from "quasar";
-import { q, m } from '#imports'
+import { q, m, api } from '#imports'
 const quasar = useQuasar();
 let { app, my } = await q({ app: ['googleClientId'], my: ["gmail"] })
 
@@ -79,16 +79,12 @@ const unlink = async () => {
 
         <template v-if="app.googleClientId">
             <q-card-section v-if="my.gmail">
-                You have already linked your Google account.<br />
-
-                Your gmail is {{ my.gmail }}
-
-
-
-                <div>
-                    <l-btn label="Unlink" @click="unlink" icon="sym_o_delete"></l-btn>
-                </div>
+                <p>
+                    You have already linked your Google account.<br />
 
+                    Your gmail is {{ my.gmail }}
+                </p>
+                <l-btn label="Unlink" @click="unlink" icon="sym_o_delete"></l-btn>
             </q-card-section>
 
             <q-card-section v-else>

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

@@ -24,7 +24,7 @@ const route = useRoute()
                             exact />
                         <q-route-tab name="openid" icon="sym_o_key" :label="$t('Open ID')" to="/User/setting/open_id"
                             exact />
-                        <q-route-tab name="myfav" icon="sym_o_star" :label="$t('My favorite')"
+                        <q-route-tab name="myfav" icon="sym_o_favorite" :label="$t('My favorite')"
                             to="/User/setting/my_favorite" exact />
 
                     </q-tabs>

package/package.json

@@ -1,59 +1,59 @@
-{
-  "name": "@hostlink/nuxt-light",
-  "version": "1.13.7",
-  "description": "HostLink Nuxt Light Framework",
-  "repository": {
-    "type": "git",
-    "url": "@hostlink/nuxt-light"
-  },
-  "license": "MIT",
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": "./dist/types.d.ts",
-      "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
-    }
-  },
-  "main": "./dist/module.cjs",
-  "types": "./dist/types.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "prepack": "nuxt-module-build build",
-    "dev": "nuxi dev playground --host",
-    "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-    "release:org": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
-    "release": "npm run prepack && changelogen --release && npm publish --access=public && git push --follow-tags",
-    "lint": "eslint .",
-    "test": "vitest run",
-    "test:watch": "vitest watch"
-  },
-  "dependencies": {
-    "@formkit/drag-and-drop": "^0.1.6",
-    "@hostlink/light": "^2.0.1",
-    "@nuxt/kit": "^3.7.4",
-    "@nuxt/module-builder": "^0.8.3",
-    "@quasar/extras": "^1.16.11",
-    "@quasar/vite-plugin": "^1.7.0",
-    "axios": "^1.5.0",
-    "diff2html": "^3.4.47",
-    "formkit-quasar": "^0.0.15",
-    "json-to-graphql-query": "^2.2.5",
-    "quasar": "^2.15.4",
-    "vue-i18n": "^9.2.2",
-    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
-  },
-  "devDependencies": {
-    "@nuxt/devtools": "latest",
-    "@nuxt/eslint-config": "^0.2.0",
-    "@nuxt/schema": "^3.7.4",
-    "@nuxt/test-utils": "^3.7.0",
-    "@types/node": "^22.5.0",
-    "changelogen": "^0.5.4",
-    "eslint": "^8.46.0",
-    "nuxt": "^3.7.0"
-  }
-}
+{
+  "name": "@hostlink/nuxt-light",
+  "version": "1.14.1",
+  "description": "HostLink Nuxt Light Framework",
+  "repository": {
+    "type": "git",
+    "url": "@hostlink/nuxt-light"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "nuxi dev playground --host",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release:org": "npm run lint && npm run test && npm run prepack && npm publish && git push --follow-tags",
+    "release": "npm run prepack && npm publish --access=public && git push --follow-tags",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch"
+  },
+  "dependencies": {
+    "@formkit/drag-and-drop": "^0.1.6",
+    "@hostlink/light": "^2.0.1",
+    "@nuxt/kit": "^3.7.4",
+    "@nuxt/module-builder": "^0.8.3",
+    "@quasar/extras": "^1.16.11",
+    "@quasar/vite-plugin": "^1.7.0",
+    "axios": "^1.5.0",
+    "diff2html": "^3.4.47",
+    "formkit-quasar": "^0.0.15",
+    "json-to-graphql-query": "^2.2.5",
+    "quasar": "^2.15.4",
+    "vue-i18n": "^9.2.2",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "latest",
+    "@nuxt/eslint-config": "^0.2.0",
+    "@nuxt/schema": "^3.7.4",
+    "@nuxt/test-utils": "^3.7.0",
+    "@types/node": "^22.5.0",
+    "changelogen": "^0.5.4",
+    "eslint": "^8.46.0",
+    "nuxt": "^3.7.0"
+  }
+}