@hostlink/nuxt-light 0.0.90 → 0.0.92

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.90"
+  "version": "0.0.92"
 }

package/dist/module.mjs

@@ -45,7 +45,6 @@ const module = defineNuxtModule({
       { name: "getObject", from },
       { name: "loadObject", from },
       { name: "list", from },
-      { name: "listData", from },
       { name: "m", from },
       { name: "q", from },
       { name: "removeObject", from },

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

@@ -1,15 +1,22 @@
 <script setup>
-import { useLight } from "#imports";
+import { useLight, watch } from "#imports";
 import { useRuntimeConfig } from 'nuxt/app'
 import { setApiUrl } from '@hostlink/light'
 import { Dialog } from 'quasar'
 import { q } from '../'
+import { useRoute } from "#vue-router";
 const config = useRuntimeConfig();
 setApiUrl(config?.public?.apiBase ?? '/api/');
 
+const route = useRoute();
+const light = useLight()
+
+light.setCurrentRoute(route);
+watch(route, (to, from) => {
+    light.setCurrentRoute(to);
+});
 
 let app = null
-const light = useLight()
 try {
     app = (await q({ app: ['company', 'companyLogo', 'logged', 'twoFactorAuthentication', 'googleClientId'] })).app;
     light.setCompany(app.company);
@@ -30,13 +37,13 @@ try {
     <q-layout v-if="!app.logged">
         <q-page-container class="bg-grey-2" style="color:#1f1f1f">
             <q-page padding>
-                <l-login :twoFactojrAuthentication="app.twoFactorAuthentication"
+                <l-login :two-factor-authentication="app.twoFactorAuthentication"
                     :google-client-id="app.googleClientId"></l-login>
             </q-page>
         </q-page-container>
     </q-layout>
 
-    <l-app-main>
+    <l-app-main v-else>
         <slot></slot>
     </l-app-main>
 </template>

package/dist/runtime/components/l-date-picker.vue

@@ -45,14 +45,21 @@ const localValue = computed({
 
 const rules = [];
 
-if (props.required && !props.range) {
+if (props.required) {
     rules.push((val) => {
         if (!val) {
             return "Required";
         }
+    })
+}
+
+if (!props.range) {
+    rules.push((val) => {
         //check val is YYYY-MM-DD
-        if (!val.match(/^\d{4}-\d{2}-\d{2}$/)) {
-            return "Invalid date format";
+        if (val) {
+            if (!val.match(/^\d{4}-\d{2}-\d{2}$/)) {
+                return "Invalid date format";
+            }
         }
     });
 }
@@ -70,9 +77,11 @@ const attrs = {
     ...useAttrs(),
 }
 
+const mask = props.range ? "####-##-## - ####-##-##" : "####-##-##";
+
 </script>
 <template>
-    <q-input v-bind="attrs" v-model="localValue" :rules="rules" :label="$t(label)" hide-bottom-space>
+    <q-input v-bind="attrs" v-model="localValue" :rules="rules" :label="$t(label)" hide-bottom-space :mask="mask">
         <template v-slot:prepend>
             <q-btn icon="sym_o_event" round dense flat>
                 <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">

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

@@ -0,0 +1,8 @@
+<script setup>
+const props = defineProps(['label']);
+</script>
+<template>
+    <q-field :label="$t(props.label ?? '')">
+        <slot></slot>
+    </q-field>
+</template>

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

@@ -1,5 +1,4 @@
 <script setup>
-import { inject } from 'vue'
 const props = defineProps({
     label: {
         type: String,

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

@@ -1,5 +1,4 @@
 <script setup>
-import { useRouter } from "vue-router"
 const props = defineProps({
     to: {
         type: String,
@@ -11,15 +10,9 @@ const props = defineProps({
         default: "primary"
     },
 })
-const router = useRouter();
-const navigate = () => {
-    if (props.to) {
-        router.push(props.to);
-    }
-}
 </script>
 <template>
-    <a class="cursor-pointer" @click="navigate" style="text-decoration: underline; color:var(--q-primary)">
+    <router-link :to="props.to" style="text-decoration: underline; color:var(--q-primary)">
         <slot />
-    </a>
+    </router-link>
 </template>

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

@@ -1,7 +1,5 @@
 <script setup>
 
-
-
 const props = defineProps({
     modelValue: {
         type: Object
@@ -11,11 +9,29 @@ const props = defineProps({
     }
 })
 
+function getTo(field) {
+
+    const raw=field.getRaw();
+    
+    if (raw.to) {
+        if (raw.to instanceof Function) {
+            return raw.to(props.modelValue);
+        }
+
+        if (typeof raw.to == 'string') {
+            return raw.to;
+        }
+    }
+
+    return null;
+}
+
+
 </script>
 <template>
     <q-list bordered separator>
         <template v-if="fields">
-            <l-item v-for="field in fields" :label="field.getRaw().label">
+            <l-item v-for="field in fields" :label="field.getRaw().label" :to="getTo(field)">
                 {{ field.getFormattedValue(props.modelValue) }}
             </l-item>
 

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

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { useQuasar, QTable } from 'quasar';
-import { ref, computed, onMounted, useSlots, reactive, useAttrs } from "vue";
-import { t, deleteObject, q, f, useLight, GQLFieldBuilder } from '../';
-import { toQuery } from '@hostlink/light'
+import { ref, computed, onMounted, useSlots, useAttrs } from "vue";
+import { t, deleteObject, q, useLight, GQLFieldBuilder } from '../';
 
 const errors = ref<InstanceType<any>>([]);
 
@@ -338,7 +337,9 @@ const getFilterValue = () => {
         if (col.searchable) {
             if (filters.value[col.name]) {
 
-                if (col.searchType == "date") {
+                if (col.searchType == "number") {
+                    f[col.name] = filters.value[col.name]
+                } else if (col.searchType == "date") {
                     if (filters.value[col.name].from) {
                         f[col.name] = {
                             between: [filters.value[col.name].from, filters.value[col.name].to]
@@ -406,7 +407,18 @@ const attrs = {
 }
 
 const filter = ref('');
+
+const toColumns = props.columns?.filter((col: any) => {
+    return col.to;
+}).map((col: any) => {
+    col.slot_name = 'body-cell-' + col.name;
+    return col;
+
+})
+
+console.log(ss);
 </script>
+
 <template>
     <template v-if="errors.length > 0">
         <div class="q-gutter-sm">
@@ -415,7 +427,8 @@ const filter = ref('');
     </template>
 
     <template v-if="debug">
-        <pre>primaryKey:{{ primaryKey }}
+        <pre>
+        primaryKey:{{ primaryKey }}
         modelName:{{ modelName }}
         filters:{{ filters }}
         pagination:{{ pagination }}
@@ -428,6 +441,7 @@ const filter = ref('');
         rows:{{ props.rows }}
     </template>
 
+
     <q-table v-bind="attrs" :row-key="rowKey" :loading="loading" :rows="rows" ref="table" @request="onRequest"
         :rows-per-page-label="$t(props.rowsPerPageLabel)" :columns="renderColumns"
         :rows-per-page-options="rowsPerPageOptions" :selection="selection" v-model:pagination="pagination" :filter="filter">
@@ -441,15 +455,19 @@ const filter = ref('');
 
             <q-btn v-if="fullscreen" flat round dense :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                 @click="props.toggleFullscreen" class="q-ml-md" />
-
-
         </template>
 
-
         <template v-for="s in ss" v-slot:[s]="props">
             <slot :name="s" v-bind="props"></slot>
         </template>
 
+        <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) }}
+                </l-link>
+            </q-td>
+        </template>
 
         <template #body-cell-_actions="props">
             <q-td :props="props" auto-width>
@@ -479,6 +497,11 @@ const filter = ref('');
                 <q-td v-for="col in props.cols">
                     <template v-if="col.searchable">
 
+                        <template v-if="col.searchType == 'number'">
+                            <q-input dense clearable v-model.number="filters[col.name]" @keydown.enter.prevent="onFilters"
+                                @clear="onFilters" mask="##########"></q-input>
+                        </template>
+
                         <template v-if="col.searchType == 'select'">
                             <q-select dense v-model="filters[col.name]" @update:model-value="onFilters" clearable
                                 :options="col.searchOptions" @clear="onFilters" emit-value />

package/dist/runtime/index.d.ts

@@ -9,6 +9,8 @@ interface Light {
     setCompany(company: string): void;
     getCompanyLogo(): string;
     setCompanyLogo(logo: string): void;
+    setCurrentRoute(to: any, from: any): void;
+    getID(): Number | null;
 }
 export declare const useLight: () => Light;
 export * from "./lib";

package/dist/runtime/index.mjs

@@ -5,6 +5,7 @@ const app = {
   company: "",
   companyLogo: ""
 };
+let currentRoute = null;
 export const useLight = () => {
   return {
     setCompany: (company) => {
@@ -42,6 +43,19 @@ export const useLight = () => {
     },
     setStyles(s) {
       styles = s;
+    },
+    setCurrentRoute(to, from) {
+      currentRoute = to;
+    },
+    getID() {
+      if (currentRoute == null)
+        return null;
+      let name = currentRoute.name?.toString();
+      if (name == void 0)
+        return 0;
+      let parts = name.split("-");
+      const keyname = parts[1];
+      return parseInt(currentRoute.params[keyname]);
     }
   };
 };

package/dist/runtime/lib/getGQLFields.mjs

@@ -1,8 +1,12 @@
 import GQLFieldBuilder from "./GQLFieldBuilder.mjs";
+import { getModelField } from "@hostlink/light";
 export default (name, fields) => {
   const builder = GQLFieldBuilder();
   fields.forEach((field) => {
-    builder.add(getObjectField(name, field).getGQLField());
+    const modelField = getModelField(name, field);
+    if (modelField) {
+      builder.add(modelField.getGQLField());
+    }
   });
   return builder.get();
 };

package/dist/runtime/lib/getID.d.ts

@@ -1,2 +1,2 @@
-declare const _default: () => Number;
+declare const _default: () => Number | null;
 export default _default;

package/dist/runtime/lib/getID.mjs

@@ -1,12 +1,4 @@
-import { useRoute } from "vue-router";
-const route = useRoute();
+import { useLight } from "../index.mjs";
 export default () => {
-  let name = route.name?.toString();
-  if (name == void 0)
-    return 0;
-  let parts = name.split("-");
-  const module = parts[0];
-  const moduleLower = module.charAt(0).toLowerCase() + module.slice(1);
-  const keyname = parts[1];
-  return parseInt(route.params[keyname]);
+  return useLight().getID();
 };

package/dist/runtime/lib/index.d.ts

@@ -4,7 +4,6 @@ import getApiUrl from "./getApiUrl";
 import getCurrentUser from "./getCurrentUser";
 import getObject from "./getObject";
 import list from "./list";
-import listData from "./listData";
 import m from "./m";
 import q from "./q";
 import removeObject from "./removeObject";
@@ -22,4 +21,4 @@ declare const notify: (message: string, color?: string) => void;
 import getID from "./getID";
 declare const getApiBase: () => {};
 import { getGQLFields } from '@hostlink/light';
-export { addObject, f, getApiUrl, getCurrentUser, getObject, list, listData, m, q, removeObject, t, updateObject, notify, getID, deleteObject, listObject, isGranted, getApiBase, loadObject, GQLFieldBuilder, getModelField, getModelFields, getModelColumns, getGQLFields };
+export { addObject, f, getApiUrl, getCurrentUser, getObject, list, m, q, removeObject, t, updateObject, notify, getID, deleteObject, listObject, isGranted, getApiBase, loadObject, GQLFieldBuilder, getModelField, getModelFields, getModelColumns, getGQLFields };

package/dist/runtime/lib/index.mjs

@@ -6,7 +6,6 @@ import getApiUrl from "./getApiUrl.mjs";
 import getCurrentUser from "./getCurrentUser.mjs";
 import getObject from "./getObject.mjs";
 import list from "./list.mjs";
-import listData from "./listData.mjs";
 import m from "./m.mjs";
 import q from "./q.mjs";
 import removeObject from "./removeObject.mjs";
@@ -40,7 +39,6 @@ export {
   getCurrentUser,
   getObject,
   list,
-  listData,
   m,
   q,
   removeObject,

package/dist/runtime/lib/list.d.ts

@@ -1 +1,7 @@
-export default function list(name: string, props?: any, fields?: Array<string>): Promise<any>;
+import { Fields } from "@hostlink/light";
+export default function list(name: string, props?: {
+    sort?: string;
+    filters?: object;
+    offset?: number;
+    limit?: number;
+} | null, fields?: Fields): Promise<any>;

package/dist/runtime/lib/list.mjs

@@ -1,35 +1,38 @@
-import q from "./q.mjs";
-import f from "./f.mjs";
-export default async function list(name, props = {}, fields = []) {
-  let v = {};
-  if (props.sort) {
-    v.sort = props.sort;
+import { query, toQuery } from "@hostlink/light";
+export default async function list(name, props = null, fields = []) {
+  let q = {};
+  if (props) {
+    if (props.sort) {
+      q.__args = q.__args || {};
+      q.__args.sort = props.sort;
+    }
+    if (props.filters) {
+      q.__args = q.__args || {};
+      q.__args.filters = props.filters;
+    }
   }
-  if (props.filters) {
-    v.filters = {
-      value: props.filters,
-      type: "mixed"
-    };
+  q.data = {};
+  if (props) {
+    if (props.offset) {
+      q.data.__args = q.data.__args || {};
+      q.data.__args.offset = props.offset;
+    }
+    if (props.limit) {
+      q.data.__args = q.data.__args || {};
+      q.data.__args.limit = props.limit;
+    }
   }
-  let offset_limit = {};
-  if (props.offset) {
-    offset_limit.offset = props.offset;
-  }
-  if (props.limit) {
-    offset_limit.limit = props.limit;
-  }
-  const fs = fields;
-  if (props.fields) {
-    fs.push(...props.fields);
-  }
-  let data = await q(`list${name}`, v, [f("data", offset_limit, fs), f("meta", ["total", "key", "name"])]);
-  if (props.done) {
-    props.done({
-      rows: data.data,
-      total: data.meta.total,
-      key: data.meta.key,
-      name: data.meta.name
-    });
-  }
-  return data.data;
+  q.data = {
+    ...q.data,
+    ...toQuery(fields)
+  };
+  q.meta = {
+    total: true,
+    key: true,
+    name: true
+  };
+  const resp = await query({
+    [`list${name}`]: q
+  });
+  return resp[`list${name}`];
 }

package/dist/runtime/lib/listObject.d.ts

@@ -1 +1,2 @@
-export default function listObject(name: string, filters: {} | undefined, sort: String, offset: number, limit: number, fields?: Array<string>): Promise<any>;
+import { Fields } from "@hostlink/light";
+export default function listObject(name: string, filters: {} | undefined, sort: string, offset: number, limit: number, fields?: Fields): Promise<any>;

package/dist/runtime/lib/listObject.mjs

@@ -1,19 +1,10 @@
-import q from "./q.mjs";
-import f from "./f.mjs";
+import list from "./list.mjs";
 export default async function listObject(name, filters = {}, sort, offset, limit, fields = []) {
-  let offset_limit = {};
-  if (offset) {
-    offset_limit.offset = offset;
-  }
-  if (limit) {
-    offset_limit.limit = limit;
-  }
-  let params = {};
-  if (sort) {
-    params.sort = sort;
-  }
-  if (filters) {
-    params.filters = filters;
-  }
-  return await q(`list${name}`, params, [f("data", offset_limit, fields), f("meta", ["total", "key", "name"])]);
+  const resp = await list(name, {
+    filters,
+    sort,
+    offset,
+    limit
+  }, fields);
+  return resp.data;
 }

package/dist/runtime/lib/loadObject.mjs

@@ -1,6 +1,6 @@
-import listData from "./listData.mjs";
+import list from "./list.mjs";
 export default async function(module, filters, fields = []) {
-  let { data } = await listData(module, {
+  let { data } = await list(module, {
     filters
   }, fields);
   if (data.length > 0) {

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

@@ -157,4 +157,5 @@
     "Event Log": "事件紀錄",
     "Mail Log": "郵件紀錄",
     "User Log": "使用者紀錄"
+    
 }

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

@@ -1,42 +1,6 @@
 <script setup>
-const columns = [
-    {
-        label: "EventLog ID",
-        name: "eventlog_id",
-        sortable: true,
-        searchable: true,
-    },
-
-    {
-        label: "Class",
-        name: "class",
-        sortable: true,
-        searchable: true,
-    },
-
-    {
-        label: "ID",
-        name: "id",
-        sortable: true,
-        searchable: true,
-    },
-    {
-        label: "Action",
-        name: "action",
-        sortable: true,
-        searchable: true,
-    }, {
-        label: "Created time",
-        name: "created_time",
-        sortable: true,
-        searchable: true,
-    }, {
-        label: "Username",
-        name: "username",
-        sortable: true,
-        searchable: true,
-    }
-]
+import { getModelColumns } from "#imports"
+const columns = getModelColumns('EventLog', ['eventlog_id', 'class', 'id', 'action', 'created_time', 'username'])
 
 </script>
 

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

@@ -1,40 +1,41 @@
 <script setup>
-const columns = [
-    {
-        label: "ID",
-        name: "maillog_id",
-        sortable: true,
-        searchable: true,
-    }, {
-        label: "From",
-        name: "from",
-        sortable: true,
-        searchable: true,
-    }, {
-        label: "To",
-        name: "to",
-        sortable: true,
-        searchable: true,
-    },
-    {
-        label: "Subject",
-        name: "subject",
-        sortable: true,
-        searchable: true,
-    },
-    {
-        label: "Created time",
-        name: "created_time",
-        sortable: true,
-        searchable: true,
-        searchType: "date",
-    }
-]
+import { getModelColumns } from "#imports"
+import { ref } from 'vue'
+const columns = getModelColumns("MailLog", ["maillog_id", "from", "to", "subject", "created_time"])
 
+
+columns.push({
+    label: "Content",
+    name: "_act",
+    gqlField: ["body"]
+})
+const show = ref(false)
+const content = ref("")
 </script>
 
 <template>
     <l-page>
-        <l-table @request="$event.loadObjects('MailLog')" :columns="columns" sort-by="maillog_id:desc" />
+        <q-dialog v-model="show" full-width>
+            <l-card>
+                <q-card-section>
+                    <iframe width="100%" height="500px" :srcdoc="content" frameborder="0"></iframe>
+                </q-card-section>
+            </l-card>
+        </q-dialog>
+        <l-table row-key="maillog_id" @request="$event.loadObjects('MailLog')" :columns="columns" sort-by="maillog_id:desc">
+
+            <template #body-cell-_act="props">
+                <q-td :props="props">
+                    <l-btn @click="
+                        content = props.row.body;
+                    show = true" label="Show" icon="sym_o_visibility">
+                    </l-btn>
+
+
+                </q-td>
+
+            </template>
+
+        </l-table>
     </l-page>
 </template>

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

@@ -31,10 +31,10 @@ const onSave = async () => {
 
             <l-input label="Permission name" v-model="obj.value" required></l-input>
 
-            <q-field label="Roles" stack-label>
+            <l-field label="Roles" stack-label>
                 <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline>
                 </q-option-group>
-            </q-field>
+            </l-field>
 
         </l-form>
 

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

@@ -62,10 +62,10 @@ const submit = () => {
 <template>
     <l-page>
         <l-form submit-label="Export" submit-icon="sym_o_download" @submit="submit">
-            <q-field label="Roles" stack-label>
+            <l-field label="Roles" stack-label>
                 <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline>
                 </q-option-group>
-            </q-field>
+            </l-field>
         </l-form>
 
 

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

@@ -2,11 +2,7 @@
 import { list, m } from '../../'
 import { useRouter } from "vue-router"
 
-let users = await list("User", {
-    fields: [
-        "user_id", "username", "name", "roles"
-    ]
-});
+let { data: users } = await list("User", null, ["user_id", "username", "name", "roles"]);
 
 let columns = [
     {
@@ -44,7 +40,6 @@ const onCickView = async (id) => {
 </script>
 <template>
     <l-page>
-
         <q-table flat :columns="columns" :rows="users">
             <template #body-cell-view="props">
                 <q-td :props="props">

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

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, inject, reactive } from 'vue';
+import { ref, reactive } from 'vue';
 import { m, q } from '../../'
 import { Notify } from 'quasar';
 const app = await q("app", ["languages"])

package/dist/runtime/pages/User/_user_id/update-role.vue

@@ -42,11 +42,10 @@ const submit = async () => {
 <template>
     <l-page>
         <l-form @submit="submit">
-            <q-field label="Roles" stack-label>
+            <l-field label="Roles" stack-label>
                 <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline>
                 </q-option-group>
-            </q-field>
-
+            </l-field>
         </l-form>
 
     </l-page>

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

@@ -58,10 +58,10 @@ roles = roles.map((role) => {
 
                     <l-input label="Default page" v-model="obj.default_page"></l-input>
 
-                    <q-field label="Roles" stack-label>
+                    <l-field label="Roles" stack-label>
                         <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline>
                         </q-option-group>
-                    </q-field>
+                    </l-field>
                 </l-col>
             </l-row>
         </l-form>

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

@@ -4,7 +4,7 @@ import getModelColumns from "../../lib/getModelColumns";
 const onRequest = async (request) => {
     request.loadObjects("User", { status: status.value });
 };
-const columns = getModelColumns("User", ["username", "first_name", "label_name", "email", "phone", "join_date", "status"]);
+const columns = getModelColumns("User", [ "username", "first_name", "label_name", "email", "phone", "join_date", "status"]);
 const status = ref("0");
 </script>
 

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

@@ -1,6 +1,50 @@
 <script setup>
-import { q } from '../../'
-const my = await q("my", ["user_id", "username", "first_name", "last_name", "email", "phone", "roles", "addr1", "addr2", "addr3", "join_date"])
+import { q, getModelColumns } from '../../'
+import { getGQLFields } from '#imports'
+import { toQuery } from '@hostlink/light';
+
+const { my } = await q(
+    {
+        my: ["user_id", "username", "first_name", "last_name", "email", "phone", "roles", "addr1", "addr2", "addr3", "join_date", {
+            userLog: {
+                __args: {
+                    sort: "userlog_id:desc"
+                },
+                data: {
+                    __args: {
+                        limit: 10
+                    },
+                    ...toQuery(getGQLFields('UserLog', ['login_dt', 'result', "user_agent"]))
+                }
+            },
+            eventLog: {
+                __args: {
+                    sort: "eventlog_id:desc"
+                },
+                data: {
+                    __args: {
+                        limit: 10
+                    },
+                    ...toQuery(getGQLFields('EventLog', ['class', 'id', 'action', "created_time"]))
+                }
+            }
+        }]
+    }
+)
+
+const userlogColumns = getModelColumns('UserLog', ['login_dt', 'result', 'user_agent']);
+//remove all searchable
+userlogColumns.forEach(col => {
+    col.searchable = false;
+})
+
+
+const eventLogCols = getModelColumns('EventLog', ['class', 'action', 'created_time']);
+//remove all searchable
+eventLogCols.forEach(col => {
+    col.searchable = false;
+})
+
 </script>
 <template>
     <l-page title="User profile">
@@ -8,18 +52,32 @@ const my = await q("my", ["user_id", "username", "first_name", "last_name", "ema
             <l-btn icon="sym_o_key" to="update-password" label="Update password" />
             <l-btn icon="sym_o_key" to="two-factor-auth" label="Two factor auth" />
         </template>
-        <l-card>
-            <l-list>
-                <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>
-                <l-item label="Join date">{{ my.join_date }}</l-item>
-                <l-item label="Roles">{{ my.roles.join(",") }}</l-item>
-            </l-list>
-        </l-card>
+
+        <div class="q-gutter-md q-mt-md">
+            <l-card>
+                <l-list>
+                    <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>
+                    <l-item label="Join date">{{ my.join_date }}</l-item>
+                    <l-item label="Roles">{{ my.roles.join(",") }}</l-item>
+                </l-list>
+            </l-card>
+
+            <l-card title="User Log">
+                <l-table :rows="my.userLog.data" :columns="userlogColumns" searchable :rows-per-page-options="[0]">
+                </l-table>
+            </l-card>
+
+            <l-card title="Event Log">
+                <l-table :rows="my.eventLog.data" :columns="eventLogCols" searchable :rows-per-page-options="[0]">
+                </l-table>
+            </l-card>
+        </div>
+
 
     </l-page>
 </template>

package/dist/runtime/plugin.mjs

@@ -12,10 +12,14 @@ import { useLight } from "./index.mjs";
 import TypeUser from "./types/User.mjs";
 import TypeUserLog from "./types/UserLog.mjs";
 import TypeSystemValue from "./types/SystemValue.mjs";
+import TypeMailLog from "./types/MailLog.mjs";
+import TypeEventLog from "./types/EventLog.mjs";
 export default defineNuxtPlugin((nuxtApp) => {
   defineModel("User", TypeUser);
   defineModel("UserLog", TypeUserLog);
   defineModel("SystemValue", TypeSystemValue);
+  defineModel("MailLog", TypeMailLog);
+  defineModel("EventLog", TypeEventLog);
   nuxtApp.vueApp.config.errorHandler = (error) => {
     console.log(error);
     const light = useLight();

package/dist/runtime/types/EventLog.d.ts

@@ -0,0 +1,33 @@
+declare const _default: {
+    eventlog_id: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    class: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    id: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    action: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    created_time: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    username: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+};
+export default _default;

package/dist/runtime/types/EventLog.mjs

@@ -0,0 +1,32 @@
+export default {
+  eventlog_id: {
+    label: "EventLog ID",
+    sortable: true,
+    searchable: true
+  },
+  class: {
+    label: "Class",
+    sortable: true,
+    searchable: true
+  },
+  id: {
+    label: "ID",
+    sortable: true,
+    searchable: true
+  },
+  action: {
+    label: "Action",
+    sortable: true,
+    searchable: true
+  },
+  created_time: {
+    label: "Created time",
+    sortable: true,
+    searchable: true
+  },
+  username: {
+    label: "Username",
+    sortable: true,
+    searchable: true
+  }
+};

package/dist/runtime/types/MailLog.d.ts

@@ -0,0 +1,30 @@
+declare const _default: {
+    maillog_id: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+        searchType: string;
+    };
+    from: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    to: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    subject: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    created_time: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+        searchType: string;
+    };
+};
+export default _default;

package/dist/runtime/types/MailLog.mjs

@@ -0,0 +1,29 @@
+export default {
+  maillog_id: {
+    label: "ID",
+    sortable: true,
+    searchable: true,
+    searchType: "number"
+  },
+  from: {
+    label: "From",
+    sortable: true,
+    searchable: true
+  },
+  to: {
+    label: "To",
+    sortable: true,
+    searchable: true
+  },
+  subject: {
+    label: "Subject",
+    sortable: true,
+    searchable: true
+  },
+  created_time: {
+    label: "Created time",
+    sortable: true,
+    searchable: true,
+    searchType: "date"
+  }
+};

package/dist/runtime/types/User.mjs

@@ -40,4 +40,12 @@ export default {
       return ["Active", "Inactive"][value];
     }
   }
+  /* ,
+  test: {
+      label: "Test",
+      name: "_test",
+      to: (row: any) => `/User/${row.user_id}/view`,
+      gqlField: ["user_id", "first_name"],
+      field: (row: any) => row.first_name,
+  } */
 };

package/package.json

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

package/dist/runtime/lib/listData.d.ts

@@ -1 +0,0 @@
-export default function listData(name: string, props?: any, fields?: Array<string | Object> | Object): Promise<any>;

package/dist/runtime/lib/listData.mjs

@@ -1,33 +0,0 @@
-import { query, toQuery } from "@hostlink/light";
-export default async function listData(name, props = {}, fields = []) {
-  let json = {};
-  if (props.sort) {
-    json.__args = json.__args || {};
-    json.__args.sort = props.sort;
-  }
-  if (props.filters) {
-    json.__args = json.__args || {};
-    json.__args.filters = props.filters;
-  }
-  json.data = {};
-  if (props.offset) {
-    json.data.__args = json.data.__args || {};
-    json.data.__args.offset = props.offset;
-  }
-  if (props.limit) {
-    json.data.__args = json.data.__args || {};
-    json.data.__args.limit = props.limit;
-  }
-  Object.entries(toQuery(fields)).forEach(([key, value]) => {
-    json.data[key] = value;
-  });
-  json.meta = {
-    total: true,
-    key: true,
-    name: true
-  };
-  const q = {};
-  q[`list${name}`] = json;
-  let data = await query(q);
-  return data[`list${name}`];
-}