@hostlink/nuxt-light 1.14.3 → 1.15.0

package/dist/module.json

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

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

@@ -0,0 +1,32 @@
+<script setup>
+
+import { useI18n } from 'vue-i18n';
+
+const i18n = useI18n();
+
+const props = defineProps({
+    gutter: {
+        type: String,
+        default: "none"
+    },
+    label: {
+        type: String,
+        default: null
+    }
+
+})
+
+</script>
+
+<style scoped>
+body.body--dark fieldset{border-color:hsla(0,0%,100%,.6)}fieldset{border:1px solid rgba(0,0,0,.24);border-radius:4px;margin:0}legend{padding-left:.5rem;padding-right:.5rem}
+</style>
+<template>
+    <fieldset :class="`q-gutter-${props.gutter}`">
+        <legend v-if="props.label">{{ i18n.t(props.label) }}</legend>
+        <slot></slot>
+
+        {{ props }}
+
+    </fieldset>
+</template>

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

@@ -418,8 +418,12 @@ if (route.fullPath == "/" && my.default_page) {
             <slot name="header"></slot>
             <q-banner dense inline-actions class="bg-grey-4 q-ma-md" v-for=" error in errors " rounded>
                 {{ error }}
-
                 <template v-slot:action>
+                    <q-btn flat label="Detail" @click="$q.dialog({
+                        title: 'Error Detail',
+                        message: error.stack,
+                        fullWidth: true,
+                    })"></q-btn>
                     <q-btn flat icon="sym_o_close" round dense @click="light.removeError(error)" />
                 </template>
             </q-banner>

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

@@ -19,5 +19,5 @@ const onDelete = () => {
 }
 </script>
 <template>
-    <q-btn flat round dense icon="sym_o_delete" @click="onDelete" />
+    <q-btn flat round icon="sym_o_delete" @click="onDelete" />
 </template>

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

@@ -33,13 +33,14 @@ const types = ["varchar", "int", "date", "time", "datetime", "timestamp", "text"
 
 
 <template>
-    <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <q-dialog ref="dialogRef">
         <q-card class="q-dialog-plugin">
-            <l-bar>
+            <q-toolbar>
+                <q-toolbar-title>Add Field</q-toolbar-title>
                 <q-space />
-                <q-btn dense flat icon="sym_o_close" @click="onDialogCancel" />
-            </l-bar>
-            <form-kit type="l-form" @submit="onOKClick" :value="{
+                <q-btn dense flat icon="sym_o_close" v-close-popup />
+            </q-toolbar>
+            <form-kit type="l-form" :bordered="false" @submit="onOKClick" :value="{
                 name: '',
                 type: '',
                 length: '',

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

@@ -1,3 +1,3 @@
 <template>
-     <q-btn flat round dense icon="sym_o_edit" to="edit" />
+     <q-btn flat round icon="sym_o_edit" to="edit" />
 </template>

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

@@ -0,0 +1,99 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar'
+import { ref } from 'vue'
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: null
+    },
+    width: {
+        type: String,
+        default: '500px'
+    },
+    ok: {
+        type: Function,
+        default: null
+    },
+    cancel: {
+        type: Function,
+        default: null
+    },
+    value: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+
+})
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
+import { useQuasar } from 'quasar'
+const $q = useQuasar()
+
+const loading = ref(false)
+
+
+const emits = defineEmits(['submit'])
+
+
+const onOk = async (data, node) => {
+    emits('submit', data)
+
+    if (props.ok) {
+        loading.value = true
+        try {
+            await props.ok(data)
+            onDialogOK(data)
+        } catch (error) {
+
+            $q.dialog({
+                title: 'Error',
+                message: error.message
+            })
+        } finally {
+            loading.value = false
+        }
+    } else {
+        onDialogOK(data)
+    }
+}
+
+const onCancel = async () => {
+
+    if (props.cancel) {
+        await props.cancel()
+    }
+    onDialogCancel()
+}
+
+</script>
+<template>
+    <q-dialog ref="dialogRef">
+
+        <q-card :style="{ width }" :loading="loading">
+
+            <q-toolbar>
+                <q-toolbar-title v-if="title">
+                    {{ title }}
+                </q-toolbar-title>
+                <q-space />
+                <q-btn icon="sym_o_close" flat round dense v-close-popup />
+            </q-toolbar>
+
+            <form-kit type="form" :bordered="false" :actions="false" :value="value" #default="context" @submit="onOk">
+
+                <q-card-section>
+                    <slot name="default" v-bind="context"></slot>
+                </q-card-section>
+                <q-card-actions align="right">
+                    <q-btn label="Cancel" @click="onCancel" unelevated color="grey-4" text-color="grey-8" />
+                    <q-btn label="OK" type="submit" color="primary" unelevated :disabled="!context.state.valid" />
+                </q-card-actions>
+            </form-kit>
+
+            <q-inner-loading :showing="loading"></q-inner-loading>
+        </q-card>
+    </q-dialog>
+</template>

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;
@@ -26,8 +26,10 @@ const props = withDefaults(defineProps<LInputProps>(), {
     stackLabel: undefined,
     required: false,
     hideBottomSpace: true,
+    dark: undefined,
 });
 
+
 const emit = defineEmits(["update:modelValue"]);
 
 //clone rules to new_rules
@@ -147,6 +149,7 @@ const attrs = computed(() => {
     if (props.color === undefined) a.color = light.color
     return a;
 })
+
 </script>
 <template>
     <q-input v-bind="attrs" v-model="localValue" :rules="new_rules" :type="localType">

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

@@ -15,7 +15,7 @@ export type LPageProps = QPageProps & {
     editBtn?: boolean;
     deleteBtn?: boolean;
     addBtn?: boolean;
-    gutter?: string;
+    gutter?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
     padding?: boolean
 }
 
@@ -23,6 +23,7 @@ const props = withDefaults(defineProps<LPageProps>(), {
     title: "",
     backBtn: true,
     padding: true,
+    gutter: "none"
 });
 
 const showToolbar = computed(() => {
@@ -54,19 +55,12 @@ useHead({
 })
 
 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",
-    }
+    return 'q-gutter-' + props.gutter
 })
 </script>
 
 <template>
-    <q-page :padding="props.padding" :class="localClass">
+    <q-page :padding="padding">
         <!-- q-breadcrumbs>
             <q-breadcrumbs-el icon="home" to="/" />
             <q-breadcrumbs-el label="Permission" to="/Permission" />
@@ -81,11 +75,11 @@ const localClass = computed(() => {
             <q-toolbar-title>{{ $t(title) }}</q-toolbar-title>
         </q-toolbar>
 
-
-        <div class="q-gutter-sm q-mb-sm">
+        <div :class="localClass">
             <slot name="header"></slot>
+            <slot></slot>
         </div>
 
-        <slot></slot>
+
     </q-page>
 </template>

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

@@ -1,29 +1,31 @@
 <script setup lang="ts">
-import { useQuasar, QTable, type QTableColumn, type QTableProps } from 'quasar';
+import { useQuasar, QTable, type QTableColumn, type QTableProps, Dialog } from 'quasar';
 
 import { ref, computed, onMounted, useSlots, useAttrs, watch, defineComponent, h } from "vue";
 import { t, q, useLight, GQLFieldBuilder, model } from '../';
 import { toQuery } from '@hostlink/light';
 
+const $q = useQuasar();
+
 
 const minimized = defineModel<boolean>("minimized", { default: false })
 const maximized = defineModel<boolean>("maximized", { default: false })
 
-
 // extends QTableColumn
-export interface LTableColumn extends QTableColumn {
+export type LTableColumn = QTableColumn & {
     searchable?: boolean,
     searchType?: string,
     searchOptions?: Array<any> | Function,
     searchMultiple?: boolean,
     gqlField?: string | Array<string> | Object,
     backgroundColor?: string | Function
+
 }
 
 const errors = ref<InstanceType<any>>([
 ]);
 
-export interface LTableProps extends QTableProps {
+export type LTableProps = QTableProps & {
     columns?: Array<LTableColumn>,
     actions?: Array<string>,
     sortBy?: string | null | undefined,
@@ -34,8 +36,11 @@ export interface LTableProps extends QTableProps {
     maximizable?: boolean,
     minimizable?: boolean,
     rows?: Array<any>,
+    onRequestData?: (request: LTableRequest) => void
+    addComponent?: Dialog
 }
 
+
 const props = withDefaults(defineProps<LTableProps>(), {
     actions: () => [],
     rowsPerPageLabel: "Records per page:",
@@ -56,6 +61,7 @@ const props = withDefaults(defineProps<LTableProps>(), {
     selected: () => [],
     loadingLabel: "Loading...",
     noDataLabel: "No data available",
+    dark: undefined,
 });
 
 const isServerSide = (props.rows == undefined);
@@ -98,6 +104,10 @@ export interface LTableRequest {
     sort: string,
     fields: Array<string>,
     gql: {
+        __args: {
+            filters: any,
+            sort: string
+        },
         data: {
             __args: {
                 limit: number
@@ -118,10 +128,11 @@ export interface LTableRequest {
 }
 
 const emits = defineEmits<{
-    request: [p: LTableRequest],
+    "request-data": [p: LTableRequest],
     "update:selected": [p: Array<any>]
 }>()
 
+
 const loading = ref(false);
 
 let activeEdit = false;
@@ -159,6 +170,7 @@ onMounted(() => {
     table.value && table.value.requestServerInteraction();
 })
 
+
 let primaryKey = ref(props.rowKey);
 const modelName = ref(props.modelName);
 
@@ -243,7 +255,7 @@ const getData = async (
 
 }
 
-const onRequest = async (p: any) => {
+const onLocalRequest = async (p: any) => {
     if (!isServerSide) return;
 
 
@@ -285,7 +297,7 @@ const onRequest = async (p: any) => {
     }
 
 
-    const callback = {
+    const callback: LTableRequest = {
         sort: sort,
         fields: builder.get(),
         offset: (p.pagination.page - 1) * p.pagination.rowsPerPage,
@@ -358,7 +370,7 @@ const onRequest = async (p: any) => {
 
     loading.value = true;
     //emits("request", p);
-    emits("request", callback);
+    emits("requestData", callback);
 
 }
 
@@ -395,7 +407,7 @@ const getFilterValue = () => {
 const onFilters = () => {
 
     //clone the filters
-    onRequest({
+    onLocalRequest({
         pagination: {
             page: 1,
             rowsPerPage: props.pagination.rowsPerPage,
@@ -531,6 +543,16 @@ defineExpose({
     requestServerInteraction
 })
 
+const onAdd = () => {
+    if (!props.addComponent) return;
+
+    $q.dialog({
+
+        component: props.addComponent
+    }).onOk(() => {
+        requestServerInteraction();
+    })
+}
 </script>
 
 
@@ -538,6 +560,10 @@ defineExpose({
     <l-card flat bordered :maximizable="maximizable" :minimizable="minimizable" :title="title"
         v-model:minimized="minimized" v-model:maximized="maximized">
 
+        <q-toolbar v-if="addComponent">
+            <q-btn icon="sym_o_add" label="Add" color="primary" @click="onAdd" v-if="addComponent" dense />
+        </q-toolbar>
+
 
         <template v-if="errors.length > 0">
             <div class="q-mb-sm">
@@ -547,7 +573,7 @@ defineExpose({
             </div>
         </template>
 
-        <q-table v-bind="attrs" :loading="loading" :rows="rows" ref="table" @request="onRequest" :columns="columns"
+        <q-table v-bind="attrs" :loading="loading" :rows="rows" ref="table" @request="onLocalRequest" :columns="columns"
             v-model:pagination="pagination" :filter="filter" v-model:selected="localSelected">
 
 
@@ -573,7 +599,7 @@ defineExpose({
                         <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
+                        <q-btn :class="{ 'text-grey-8': !isDark }" flat round size="sm"
                             :icon="props.expand ? 'sym_o_expand_more' : 'sym_o_expand_less'"
                             @click="props.expand = !props.expand"></q-btn>
                     </q-td>
@@ -582,13 +608,13 @@ defineExpose({
                         <div :class="{ 'text-grey-8': !isDark }" v-if="primaryKey">
 
                             <l-view-btn v-if="actionView && props.row.canView"
-                                :to="`/${modelName}/${props.row[primaryKey]}/view`" />
+                                :to="`/${modelName}/${props.row[primaryKey]}/view`" size="sm"/>
 
                             <l-edit-btn v-if="activeEdit && props.row.canUpdate"
-                                :to="`/${modelName}/${props.row[primaryKey]}/edit`" />
+                                :to="`/${modelName}/${props.row[primaryKey]}/edit`" size="sm"/>
 
                             <l-delete-btn v-if="actionDelete && props.row.canDelete"
-                                @submit="onDelete(props.row[primaryKey])"></l-delete-btn>
+                                @submit="onDelete(props.row[primaryKey])" size="sm"></l-delete-btn>
 
                             <slot name="actions" v-bind="props"></slot>
                         </div>

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

@@ -0,0 +1,12 @@
+<script setup>
+import { ref } from 'vue'
+const form = ref(null)
+const ok = async (data, node) => {
+    await new Promise(resolve => setTimeout(resolve, 1000))
+}
+</script>
+<template>
+    <l-form-dialog title="Add User" :ok="ok">
+        <form-kit type="l-input" name="name" label="Name" dense validation="required" />
+    </l-form-dialog>
+</template>

package/dist/runtime/components/l-user-eventlog.vue

@@ -5,7 +5,7 @@ const props = defineProps(['id']);
 <template>
     <div>
         <l-table row-key="eventlog_id" sort-by="eventlog_id:desc"
-            :columns="model('EventLog').columns(['eventlog_id', 'class', 'id', 'action', 'created_time'])" @request="async (req) => {
+            :columns="model('EventLog').columns(['eventlog_id', 'class', 'id', 'action', 'created_time'])" @request-data="async (req) => {
                 const a = {
                     listUser: {
                         __args: {

package/dist/runtime/components/l-user-userlog.vue

@@ -6,7 +6,7 @@ const columns = model('UserLog').columns(["userlog_id", "login_dt", "last_access
 </script>
 <template>
     <div>
-        <l-table row-key="userlog_id" sort-by="userlog_id:desc" :columns="columns" @request="async (req) => {
+        <l-table row-key="userlog_id" sort-by="userlog_id:desc" :columns="columns" @request-data="async (req) => {
             req.loadObjects('UserLog', { filters: { user_id: props.id } })
         }" />
     </div>

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

@@ -1,3 +1,3 @@
 <template>
-    <q-btn flat round dense icon="sym_o_search" />
+    <q-btn flat round icon="sym_o_search" />
 </template>

package/dist/runtime/formkit/Form.vue

@@ -1,4 +1,5 @@
-<script setup>
+<script setup lang="ts">
+import { type FormKitInputs } from '@formkit/inputs';
 import { useRouter, useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import { model } from "#imports"
@@ -7,25 +8,36 @@ const route = useRoute();
 const router = useRouter();
 const quasar = useQuasar();
 
+declare module '@formkit/inputs' {
+    interface FormKitInputProps<Props extends FormKitInputs<Props>> {
+        lForm: {
+            type: 'l-form';
+            gutter?: string;
+            bordered?: boolean;
+        };
+    }
+}
+
+
 let props = defineProps({
     context: Object
 });
 
 let onSubmit = async () => {
-    props.context.handlers.submit(new Event("submit"));
+    props.context?.handlers.submit(new Event("submit"));
 }
 
-const gutter = props.gutter ?? "md";
+const gutter = props.context?.gutter ?? "md";
 
 //check bordered is undefined
 let bordered = true;
-if (props.context.bordered !== undefined) {
+if (props.context?.bordered !== undefined) {
     bordered = props.context.bordered;
 }
 
 let redirect = true;
-if (props.context.attrs.onSubmitted) {
-    
+if (props.context?.attrs.onSubmitted) {
+
     redirect = false;
 }
 

package/dist/runtime/formkit/Input.vue

@@ -1,36 +1,49 @@
-<script setup>
+<script setup lang="ts">
+import { type FormKitInputs } from '@formkit/inputs';
 import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
 
+declare module '@formkit/inputs' {
+    interface FormKitInputProps<Props extends FormKitInputs<Props>> {
+        lInput: {
+            type: 'l-input';
+            name: string;
+            label: string;
+            number?: string;
+        };
+    }
+}
+
+
 const props = defineProps({
     context: Object
 });
 
-const { error, errorMessage } = getErrorMessage(props.context.node);
+const { error, errorMessage } = getErrorMessage(props.context?.node);
 
 const value = computed({
-    get: () => props.context.value,
+    get: () => props.context?.value,
     set: (val) => {
-        if (props.context.number !== undefined) {
+        if (props.context?.number !== undefined) {
             if (val === "") {
-                props.context.node.input(0)
+                props.context?.node.input(0)
                 return
             }
 
             let tryprase = parseInt(val)
             if (isNaN(tryprase)) {
-                props.context.node.input(val)
+                props.context?.node.input(val)
                 return
             }
 
-            if (props.context.number === "integer") {
-                props.context.node.input(parseInt(val))
+            if (props.context?.number === "integer") {
+                props.context?.node.input(parseInt(val))
                 return
             }
 
             props.context.node.input(parseFloat(val))
         } else {
-            props.context.node.input(val)
+            props.context?.node.input(val)
         }
     }
 })
@@ -45,7 +58,7 @@ const onBlur = () => {
 
 </script>
 <template>
-    <l-input v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
+    <l-input v-model="value" :label="context?.label" v-bind="context?.attrs" :error="error" :type="context?.inputType"
         :error-message="errorMessage" @blur="onBlur">
 
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">

package/dist/runtime/index.d.ts

@@ -34,9 +34,9 @@ declare const app: {
     setCompanyLogo: (logo: string) => void;
     getCompanyLogo: () => string;
     getVersion: () => string;
-    addError: (error: String) => void;
-    getErrors: () => String[];
-    removeError: (error: String) => void;
+    addError: (err: Error) => void;
+    getErrors: () => Error[];
+    removeError: (error: Error) => void;
     getStyle: (name: string) => any;
     setStyles: (s: Object) => void;
     getStyles: () => {
@@ -83,9 +83,9 @@ export declare const useLight: (options?: {
     setCompanyLogo: (logo: string) => void;
     getCompanyLogo: () => string;
     getVersion: () => string;
-    addError: (error: String) => void;
-    getErrors: () => String[];
-    removeError: (error: String) => void;
+    addError: (err: Error) => void;
+    getErrors: () => Error[];
+    removeError: (error: Error) => void;
     getStyle: (name: string) => any;
     setStyles: (s: Object) => void;
     getStyles: () => {

package/dist/runtime/index.js

@@ -1,7 +1,7 @@
 import packageJson from "../../package.json";
 import { watch, reactive, toRaw } from "vue";
 import { m, q } from "./lib/index.js";
-const errors = [];
+const errors = reactive([]);
 let styles = {};
 const COLOR_CODE = {
   red: "#f44336",
@@ -125,8 +125,8 @@ const app = reactive({
   getVersion: () => {
     return packageJson.version;
   },
-  addError: (error) => {
-    errors.push(error);
+  addError: (err) => {
+    errors.push(err);
   },
   getErrors: () => {
     return errors;

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

@@ -5,7 +5,7 @@ const columns = model('EventLog').columns(['eventlog_id', 'class', 'id', 'action
 <template>
     <l-page>
 
-        <l-table  @request="$event.loadObjects('EventLog')" :columns="columns"
+        <l-table  @request-data="$event.loadObjects('EventLog')" :columns="columns"
             sort-by="eventlog_id:desc" :actions="['view']">
 
         </l-table>

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

@@ -15,7 +15,7 @@ const content = ref("")
                 </q-card-section>
             </l-card>
         </q-dialog>
-        <l-table row-key="maillog_id" @request="$event.loadObjects('MailLog', {}, ['body'])" :columns="columns"
+        <l-table row-key="maillog_id" @request-data="$event.loadObjects('MailLog', {}, ['body'])" :columns="columns"
             sort-by="maillog_id:desc" >
 
             <template #row-expand="props">

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

@@ -17,7 +17,7 @@ const columns = [
 </script>
 <template>
     <l-page>
-        <l-table row-key="permission_id" @request="$event.loadObjects('Permission')" :columns="columns"
+        <l-table row-key="permission_id" @request-data="$event.loadObjects('Permission')" :columns="columns"
             :actions="['delete']"></l-table>
     </l-page>
 </template>

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

@@ -58,8 +58,10 @@ const columns = [
 ]
 </script>
 <template>
-    <l-page>
-
+    <l-page gutter="xs">
+        <template #header>
+            <l-btn label="Add" icon="sym_o_add" @click="dialog = true"></l-btn>
+        </template>
         <q-dialog v-model="dialog" persistent>
             <l-card style="width: 500px; max-width: 90vw;" :bordered="false" closeable>
 
@@ -84,10 +86,11 @@ const columns = [
                             <FormKit type="l-input" label="Region" name="region" validation="required"></FormKit>
                             <FormKit type="l-input" label="Endpoint" name="endpoint" validation="required"></FormKit>
                             <FormKit type="l-input" label="Prefix" name="prefix"></FormKit>
-                            <FormKit type="l-select" label="Visibility" name="visibility" validation="required" :options="[
-                                { label: 'Public', value: 'public' },
-                                { label: 'Private', value: 'private' }
-                            ]"></FormKit>
+                            <FormKit type="l-select" label="Visibility" name="visibility" validation="required"
+                                :options="[
+                                    { label: 'Public', value: 'public' },
+                                    { label: 'Private', value: 'private' }
+                                ]"></FormKit>
                         </template>
 
                         <template v-if="value.type == 'hostlink'">
@@ -100,9 +103,7 @@ const columns = [
             </l-card>
 
         </q-dialog>
-        <template #header>
-            <l-btn label="Add" icon="sym_o_add" @click="dialog = true"></l-btn>
-        </template>
+
         <l-table :rows="items" :columns="columns">
             <template #body-cell-actions="props">
                 <q-td auto-width>

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

@@ -226,7 +226,7 @@ const menusOnly = computed(() => {
         </q-dialog>
 
         <l-card>
-            <q-card-actions v-if="selectedNode">
+            <q-toolbar class="q-gutter-xs">
                 <l-btn @click="onSave" label="Save" icon="sym_o_save" />
                 <l-btn @click="onReload" label="Reload" icon="sym_o_refresh" />
                 <template v-if="selectedNode.type == 'root'">
@@ -234,7 +234,6 @@ const menusOnly = computed(() => {
                     <l-btn @click="onAddHeader(selectedNode)" label="Add Header" icon="sym_o_add" />
                     <l-btn @click="onAddSeparator(selectedNode)" label="Add Separator" icon="sym_o_add" />
                 </template>
-
                 <template v-else>
                     <q-btn-dropdown :color="$light.color" label="Add" icon="sym_o_add">
                         <q-list>
@@ -284,7 +283,7 @@ const menusOnly = computed(() => {
                         </q-list>
                     </q-btn-dropdown>
                 </template>
-            </q-card-actions>
+            </q-toolbar>
             <q-splitter v-model="splitterModel" style="height:680px">
                 <template #before>
 
@@ -318,7 +317,8 @@ const menusOnly = computed(() => {
                                             Icons</a>
                                     </li>
                                     <li>
-                                        <a href="https://quasar.dev/vue-components/icon#webfont-usage" target="_blank">Quasar
+                                        <a href="https://quasar.dev/vue-components/icon#webfont-usage"
+                                            target="_blank">Quasar
                                             Icons</a>
                                     </li>
                                 </ul>

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

@@ -4,7 +4,7 @@ const columns = model("SystemValue").columns(["name", "value"]);
 </script>
 <template>
     <l-page>
-        <l-table row-key="systemvalue_id" :columns="columns" @request="$event.loadObjects('SystemValue')"
+        <l-table row-key="systemvalue_id" :columns="columns" @request-data="$event.loadObjects('SystemValue')"
             :actions="['edit', 'delete']"></l-table>
     </l-page>
 </template>

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

@@ -1,10 +1,10 @@
 <script setup>
 import { ref } from 'vue'
-import { model } from "#imports"
+import { model, resolveComponent } from "#imports"
 const onRequest = async (request) => {
-
     request.loadObjects("User", { status: status.value });
 };
+
 const columns = model("User").columns({
     username: true,
     first_name: true,
@@ -19,17 +19,23 @@ const columns = model("User").columns({
 
 const status = ref("0");
 
+//const testDialog = resolveComponent("l-test-dialog")
+//const testDialog = resolveComponent("l-test2")
+const testDialog = null
+
+
 </script>
 
 <template>
     <l-page>
         <l-tabs v-model="status">
             <l-tab label="Active" name="0">
-                <l-table ref="table" row-key="user_id" @request="onRequest" :columns="columns"
+                <l-table ref="table" row-key="user_id" @request-data="onRequest" :columns="columns"
+                    :add-component="testDialog"
                     :actions="['view', 'edit', 'delete']"></l-table>
             </l-tab>
             <l-tab label="Inactive" name="1">
-                <l-table row-key="user_id" @request="onRequest" :columns="columns"
+                <l-table row-key="user_id" @request-data="onRequest" :columns="columns"
                     :actions="['view', 'edit', 'delete']">
                 </l-table>
             </l-tab>

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

@@ -167,7 +167,7 @@ const columns = [
 
                                     <template #body-cell-action="props">
                                         <q-td auto-width>
-                                            <q-btn flat dense round icon="sym_o_search"></q-btn>
+                                            <q-btn flat round icon="sym_o_search" size="sm"></q-btn>
                                         </q-td>
                                     </template>
                                 </q-table>

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

@@ -4,7 +4,7 @@ const columns = model("UserLog").columns(["userlog_id", "username", "login_dt",
 </script>
 <template>
     <l-page>
-        <l-table @request="$event.loadObjects('UserLog')" :columns="columns" sort-by="login_dt:desc">
+        <l-table @request-data="$event.loadObjects('UserLog')" :columns="columns" sort-by="login_dt:desc">
         </l-table>
     </l-page>
 </template>

package/dist/runtime/plugin.js

@@ -24,10 +24,14 @@ export default defineNuxtPlugin((nuxtApp) => {
   api.models.create("MailLog", TypeMailLog);
   api.models.create("EventLog", TypeEventLog);
   nuxtApp.vueApp.config.globalProperties.$light = useLight();
-  nuxtApp.vueApp.config.errorHandler = (error) => {
-    console.log(error);
+  nuxtApp.vueApp.config.errorHandler = (err, instance, info) => {
+    console.log(err);
     const light = useLight();
-    light.addError(error);
+    if (err instanceof Error) {
+      light.addError(err);
+    } else {
+      light.addError(new Error(err));
+    }
   };
   const i18n = createI18n({
     legacy: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.14.3",
+  "version": "1.15.0",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",
@@ -42,7 +42,7 @@
     "diff2html": "^3.4.47",
     "formkit-quasar": "^0.0.15",
     "json-to-graphql-query": "^2.2.5",
-    "quasar": "^2.15.4",
+    "quasar": "^2.17.0",
     "vue-i18n": "^9.2.2",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
   },