@hostlink/nuxt-light 1.54.6 → 1.55.2

package/dist/runtime/components/L/User/eventlog.vue

@@ -4,9 +4,9 @@ const props = defineProps(["id"]);
 </script>
 
 <template>
-    <div>
-        <l-table row-key="eventlog_id" sort-by="eventlog_id:desc"
-            :columns="model('EventLog').columns(['eventlog_id', 'class', 'id', 'action', 'created_time'])"
+    <div>
+        <l-table row-key="eventlog_id" sort-by="eventlog_id:desc"
+            :columns="model('EventLog').columns(['eventlog_id', 'class', 'id', 'action', 'created_time'])"
             @request-data="async (req) => {
   const a = {
     listUser: {
@@ -25,6 +25,6 @@ const props = defineProps(["id"]);
   };
   let resp = await q(a);
   req.setData(resp.listUser.data[0].eventLog);
-}" />
-    </div>
+}" />
+    </div>
 </template>

package/dist/runtime/components/L/User/overview.vue

@@ -21,23 +21,23 @@ const obj = await collect("User", {
 </script>
 
 <template>
-    <div class="row q-gutter-md">
-        <q-list dense separator class="col-md-6 col-sm-12">
-            <l-item label="Username">{{ obj.username }}</l-item>
-            <l-item label="First name">{{ obj.first_name }}</l-item>
-            <l-item label="Last name">{{ obj.last_name }}</l-item>
-            <l-item label="Email">{{ obj.email }}</l-item>
-            <l-item label="Phone">{{ obj.phone }}</l-item>
-            <l-item label="Roles">
-                <div class="q-gutter-xs float-left">
-                    <q-badge v-for="role in obj.roles" :key="role">{{ role
-                    }}</q-badge>
-                </div>
-            </l-item>
-            <l-item label="Status">{{ model("User").columns(["status"])[0].format(obj.status) }}</l-item>
-            <l-item label="Join date">{{ obj.join_date }}</l-item>
-            <l-item label="Two factor authentication">{{ obj.twoFactorEnabled ? "Yes" : "No"
-            }}</l-item>
-        </q-list>
-    </div>
+    <div class="row q-gutter-md">
+        <q-list dense separator class="col-md-6 col-sm-12">
+            <l-item label="Username">{{ obj.username }}</l-item>
+            <l-item label="First name">{{ obj.first_name }}</l-item>
+            <l-item label="Last name">{{ obj.last_name }}</l-item>
+            <l-item label="Email">{{ obj.email }}</l-item>
+            <l-item label="Phone">{{ obj.phone }}</l-item>
+            <l-item label="Roles">
+                <div class="q-gutter-xs float-left">
+                    <q-badge v-for="role in obj.roles" :key="role">{{ role
+                    }}</q-badge>
+                </div>
+            </l-item>
+            <l-item label="Status">{{ model("User").columns(["status"])[0].format(obj.status) }}</l-item>
+            <l-item label="Join date">{{ obj.join_date }}</l-item>
+            <l-item label="Two factor authentication">{{ obj.twoFactorEnabled ? "Yes" : "No"
+            }}</l-item>
+        </q-list>
+    </div>
 </template>

package/dist/runtime/components/L/User/userlog.vue

@@ -19,5 +19,5 @@ const onRequestData = async (req) => {
 </script>
 
 <template>
-    <l-table row-key="userlog_id" sort-by="userlog_id:desc" :columns="columns" @request-data="onRequestData" />
+    <l-table row-key="userlog_id" sort-by="userlog_id:desc" :columns="columns" @request-data="onRequestData" />
 </template>

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

@@ -65,18 +65,18 @@ watch(form, () => {
 </script>
 
 <template>
-    <q-checkbox left-label v-model="form.required" label="Required" />
-
-    <q-checkbox left-label v-model="form.email" label="Email" v-if="type == 'text'" />
-
-    <q-checkbox left-label v-model="form.number" label="Number" v-if="type == 'text'" />
-
-    <l-row v-if="type = 'text'">
-        <l-col :md="6">
-            <q-input label="Length min" v-model="form.length_min" type="number" stack-label outlined dense :min="0" />
-        </l-col>
-        <l-col :md="6">
-            <q-input label="Length max" v-model="form.length_max" type="number" stack-label outlined dense :min="0" />
-        </l-col>
-    </l-row>
+    <q-checkbox left-label v-model="form.required" label="Required" />
+
+    <q-checkbox left-label v-model="form.email" label="Email" v-if="type == 'text'" />
+
+    <q-checkbox left-label v-model="form.number" label="Number" v-if="type == 'text'" />
+
+    <l-row v-if="type = 'text'">
+        <l-col :md="6">
+            <q-input label="Length min" v-model="form.length_min" type="number" stack-label outlined dense :min="0" />
+        </l-col>
+        <l-col :md="6">
+            <q-input label="Length max" v-model="form.length_max" type="number" stack-label outlined dense :min="0" />
+        </l-col>
+    </l-row>
 </template>

package/dist/runtime/components/MyTest.vue

@@ -5,7 +5,7 @@ const props = defineProps({
 </script>
 
 <template>
-    <div>
-        {{ props }}
-    </div>
+    <div>
+        {{ props }}
+    </div>
 </template>

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

@@ -1,5 +1,5 @@
-<template>
-    <q-btn flat round size="sm">
-        <slot></slot>
-    </q-btn>
+<template>
+    <q-btn flat round size="sm">
+        <slot></slot>
+    </q-btn>
 </template>

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

@@ -10,7 +10,7 @@ const props = defineProps({
 </script>
 
 <template>
-    <l-btn icon="sym_o_add" v-bind="$props" :to="to ?? $route.path + '/add'">
-        <q-tooltip>{{ $t(label) }}</q-tooltip>
-    </l-btn>
+    <l-btn icon="sym_o_add" v-bind="$props" :to="to ?? $route.path + '/add'">
+        <q-tooltip>{{ $t(label) }}</q-tooltip>
+    </l-btn>
 </template>

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

@@ -22,12 +22,12 @@ const icon = computed(() => {
 </script>
 
 <template>
-    <q-item :class="`bg-${type}`">
-        <q-item-section avatar>
-            <q-icon :name="icon" class="text-white" />
-        </q-item-section>
-        <q-item-section class="text-white">
-            <slot></slot>
-        </q-item-section>
-    </q-item>
+    <q-item :class="`bg-${type}`">
+        <q-item-section avatar>
+            <q-icon :name="icon" class="text-white" />
+        </q-item-section>
+        <q-item-section class="text-white">
+            <slot></slot>
+        </q-item-section>
+    </q-item>
 </template>

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

@@ -8,11 +8,7 @@ type __VLS_Slots = {} & {
 } & {
     'page-bottom'?: (props: typeof __VLS_376) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    logout: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
-    onLogout?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -238,175 +238,174 @@ const onLogout = async () => {
 </style>
 
 <template>
-    <q-layout :view="layoutView">
-        <q-header bordered class="text-white" :class="`bg-${light.color}`">
-            <q-toolbar>
-                <q-btn dense flat round icon="sym_o_menu" class="q-mr-sm" @click="toggleLeftDrawer" />
-
-                <q-toolbar-title>
-                    {{ light.company }}
-                    <template v-if="tt.system.devMode">
-                        <span style="font-size: 0.8em;">[Dev mode]</span>
-                    </template>
-                </q-toolbar-title>
-
-                <q-space />
-
-                <slot name="header"></slot>
-
-                <q-btn :icon="isFav ? 'favorite' : 'sym_o_favorite'" round flat dense class="q-mr-xs"
-                    @click="onToggleFav" v-if="app.hasFavorite">
-                </q-btn>
-
-                <q-btn :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'" round flat dense
-                    class="q-mr-xs" @click="$q.fullscreen.toggle()">
-                    <q-tooltip>
-                        {{ $q.fullscreen.isActive ? $t("Exit Fullscreen") : $t("Fullscreen") }}
-                    </q-tooltip>
-                </q-btn>
-
-                <q-btn v-if="languages.length > 1" round flat dense icon="language" class="q-mr-xs">
-                    <q-tooltip>
-                        {{ my.language }}
-                    </q-tooltip>
-                    <q-menu>
-                        <q-list>
-                            <q-item v-for="language in languages" :key="language.value" v-close-popup clickable
-                                @click="onChangeLocale(language.value)" :active="language.value == my.language">
-                                <q-item-section>
-                                    <q-item-label>{{ language.name }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                        </q-list>
-                    </q-menu>
-                </q-btn>
-
-                <q-btn icon="sym_o_storage" flat round dense class="q-mr-sm" v-if="system.storage"
-                    :color="storageColor">
-                    <q-menu>
-                        <l-storage :storage="system.storage" style="width:250px" />
-                    </q-menu>
-                </q-btn>
-
-                <div class="q-mx-sm" v-if="$q.screen.gt.xs">
-                    <div class="text-bold text-right">
-                        {{ my.first_name }} {{ my.last_name }}
-                    </div>
-
-                    <div class="text-right ellipsis" style="max-width: 120px;">
-                        {{ my.roles.join(", ") }}
-                        <q-tooltip>
-                            {{ my.roles.join(", ") }}
-                        </q-tooltip>
-                    </div>
-                </div>
-
-                <q-btn flat round dense icon="sym_o_person" class="q-mr-sm">
-                    <q-menu max-width="250px">
-                        <q-list :dense="style.dense">
-                            <q-item v-close-popup to="/User/profile">
-                                <q-item-section avatar>
-                                    <q-icon name="sym_o_person" />
-                                </q-item-section>
-                                <q-item-section>{{ $t("Profile") }}</q-item-section>
-                            </q-item>
-
-                            <q-item v-close-popup to="/User/setting">
-                                <q-item-section avatar>
-                                    <q-icon name="sym_o_settings_account_box" />
-                                </q-item-section>
-                                <q-item-section>{{ $t("Setting") }}</q-item-section>
-                            </q-item>
-
-                            <q-item v-close-popup v-if="showViewAs" to="/System/view_as">
-                                <q-item-section avatar>
-                                    <q-icon name="sym_o_visibility" />
-                                </q-item-section>
-                                <q-item-section>{{ $t("View as") }}</q-item-section>
-                            </q-item>
-
-                            <q-item v-close-popup v-if="app.viewAsMode" @click="exitViewAs" clickable>
-                                <q-item-section avatar>
-                                    <q-icon name="sym_o_visibility_off" />
-                                </q-item-section>
-                                <q-item-section>{{ $t("Exit view as") }}</q-item-section>
-                            </q-item>
-
-                            <slot name="user-menu"></slot>
-
-                            <q-separator />
-
-                            <q-item @click="onLogout" clickable>
-                                <q-item-section avatar>
-                                    <q-icon name="logout" />
-                                </q-item-section>
-                                <q-item-section>{{ $t("Logout") }}</q-item-section>
-                            </q-item>
-
-                        </q-list>
-                    </q-menu>
-                </q-btn>
-
-                <q-btn dense flat round icon="sym_o_menu" @click="toggleRightDrawer" />
-            </q-toolbar>
-        </q-header>
-
-        <q-drawer v-model="leftDrawerOpen" bordered show-if-above side="left" :dark="menuDark" :width="menuWidth"
-            :mini-to-overlay="style.miniState" :mini="isMini" @mouseout="isMouseOnDrawer = false"
-            @mouseover="isMouseOnDrawer = true">
-            <!-- drawer content -->
-            <q-scroll-area class="fit">
-                <div class="q-mx-xs q-mt-xs">
-                    <l-menu :value="my_menus" :dense="style.dense" />
-                    <l-fav-menu :value="myFavorites" :dense="style.dense" v-if="myFavoritesCount > 0" />
-                    <l-menu :value="menus" :dense="style.dense" />
-                </div>
-            </q-scroll-area>
-        </q-drawer>
-
-        <q-drawer overlay v-model="rightDrawerOpen" side="right" bordered>
-            <!-- drawer content -->
-            <q-scroll-area class="fit">
-                <l-customizer v-model:color="light.color" v-model:theme="light.theme"
-                    v-model:miniState="style.miniState" v-model:dense="style.dense"
-                    v-model:menuOverlayHeader="style.menuOverlayHeader" v-model:footer="style.footer"
-                    v-model:menuWidth="menuWidth" :time="system.time" />
-            </q-scroll-area>
-        </q-drawer>
-
-        <q-page-container :class="containerClass" :style="containerStyle"> <!-- Error message -->
-            <div class="q-gutter-sm q-pa-sm" v-if="system.devMode && $light.errors.length > 0">
-                <q-banner dense inline-actions class="bg-grey-4" v-for="error in $light.errors" rounded>
-                    {{ error }}
-                    <template v-slot:action>
-                        <q-btn flat icon="sym_o_close" round dense @click="$light.removeError(error)" />
-                    </template>
-                </q-banner>
-
-            </div>
-
-
-            <!-- router-view v-slot="{ Component }">
-
-                <template v-if="Component">
-                    <suspense>
-                        <component :is="Component" :reloadMenu="reloadMenu"></component>
-                    </suspense>
-                </template>
-            </router-view -->
-            <NuxtLoadingIndicator />
-            <slot name="page-top"></slot>
-            <NuxtPage />
-            <slot name="page-bottom"></slot>
-        </q-page-container>
-        <q-footer bordered v-if="style.footer">
-            <q-item>
-                <q-item-section>
-                    {{ light.company }} {{ appVersion }} - Copyright {{ app.copyrightYear }} {{ app.copyrightName
-                    }}. Build
-                    {{ light.version }}
-                </q-item-section>
-            </q-item>
-        </q-footer>
-    </q-layout>
+    <q-layout :view="layoutView">
+        <q-header bordered class="text-white" :class="`bg-${light.color}`">
+            <q-toolbar>
+                <q-btn dense flat round icon="sym_o_menu" class="q-mr-sm" @click="toggleLeftDrawer" />
+
+                <q-toolbar-title>
+                    {{ light.company }}
+                    <template v-if="tt.system.devMode">
+                        <span style="font-size: 0.8em;">[Dev mode]</span>
+                    </template>
+                </q-toolbar-title>
+
+                <q-space />
+
+                <slot name="header"></slot>
+
+                <q-btn :icon="isFav ? 'favorite' : 'sym_o_favorite'" round flat dense class="q-mr-xs"
+                    @click="onToggleFav" v-if="app.hasFavorite">
+                </q-btn>
+
+                <q-btn :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'" round flat dense
+                    class="q-mr-xs" @click="$q.fullscreen.toggle()">
+                    <q-tooltip>
+                        {{ $q.fullscreen.isActive ? $t("Exit Fullscreen") : $t("Fullscreen") }}
+                    </q-tooltip>
+                </q-btn>
+
+                <q-btn v-if="languages.length > 1" round flat dense icon="language" class="q-mr-xs">
+                    <q-tooltip>
+                        {{ my.language }}
+                    </q-tooltip>
+                    <q-menu>
+                        <q-list>
+                            <q-item v-for="language in languages" :key="language.value" v-close-popup clickable
+                                @click="onChangeLocale(language.value)" :active="language.value == my.language">
+                                <q-item-section>
+                                    <q-item-label>{{ language.name }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                        </q-list>
+                    </q-menu>
+                </q-btn>
+
+                <q-btn icon="sym_o_storage" flat round dense class="q-mr-sm" v-if="system.storage"
+                    :color="storageColor">
+                    <q-menu>
+                        <l-storage :storage="system.storage" style="width:250px" />
+                    </q-menu>
+                </q-btn>
+
+                <div class="q-mx-sm" v-if="$q.screen.gt.xs">
+                    <div class="text-bold text-right">
+                        {{ my.first_name }} {{ my.last_name }}
+                    </div>
+
+                    <div class="text-right ellipsis" style="max-width: 120px;">
+                        {{ my.roles.join(", ") }}
+                        <q-tooltip>
+                            {{ my.roles.join(", ") }}
+                        </q-tooltip>
+                    </div>
+                </div>
+
+                <q-btn flat round dense icon="sym_o_person" class="q-mr-sm">
+                    <q-menu max-width="250px">
+                        <q-list :dense="style.dense">
+                            <q-item v-close-popup to="/User/profile">
+                                <q-item-section avatar>
+                                    <q-icon name="sym_o_person" />
+                                </q-item-section>
+                                <q-item-section>{{ $t("Profile") }}</q-item-section>
+                            </q-item>
+
+                            <q-item v-close-popup to="/User/setting">
+                                <q-item-section avatar>
+                                    <q-icon name="sym_o_settings_account_box" />
+                                </q-item-section>
+                                <q-item-section>{{ $t("Setting") }}</q-item-section>
+                            </q-item>
+
+                            <q-item v-close-popup v-if="showViewAs" to="/System/view_as">
+                                <q-item-section avatar>
+                                    <q-icon name="sym_o_visibility" />
+                                </q-item-section>
+                                <q-item-section>{{ $t("View as") }}</q-item-section>
+                            </q-item>
+
+                            <q-item v-close-popup v-if="app.viewAsMode" @click="exitViewAs" clickable>
+                                <q-item-section avatar>
+                                    <q-icon name="sym_o_visibility_off" />
+                                </q-item-section>
+                                <q-item-section>{{ $t("Exit view as") }}</q-item-section>
+                            </q-item>
+
+                            <slot name="user-menu"></slot>
+
+                            <q-separator />
+
+                            <q-item @click="onLogout" clickable>
+                                <q-item-section avatar>
+                                    <q-icon name="logout" />
+                                </q-item-section>
+                                <q-item-section>{{ $t("Logout") }}</q-item-section>
+                            </q-item>
+
+                        </q-list>
+                    </q-menu>
+                </q-btn>
+
+                <q-btn dense flat round icon="sym_o_menu" @click="toggleRightDrawer" />
+            </q-toolbar>
+        </q-header>
+
+        <q-drawer v-model="leftDrawerOpen" bordered show-if-above side="left" :dark="menuDark" :width="menuWidth"
+            :mini-to-overlay="style.miniState" :mini="isMini" @mouseout="isMouseOnDrawer = false"
+            @mouseover="isMouseOnDrawer = true">
+            <!-- drawer content -->
+            <q-scroll-area class="fit">
+                <div class="q-mx-xs q-mt-xs">
+                    <l-menu :value="my_menus" :dense="style.dense" />
+                    <l-fav-menu :value="myFavorites" :dense="style.dense" v-if="myFavoritesCount > 0" />
+                    <l-menu :value="menus" :dense="style.dense" />
+                </div>
+            </q-scroll-area>
+        </q-drawer>
+
+        <q-drawer overlay v-model="rightDrawerOpen" side="right" bordered>
+            <!-- drawer content -->
+            <q-scroll-area class="fit">
+                <l-customizer v-model:color="light.color" v-model:theme="light.theme"
+                    v-model:miniState="style.miniState" v-model:dense="style.dense"
+                    v-model:menuOverlayHeader="style.menuOverlayHeader" v-model:footer="style.footer"
+                    v-model:menuWidth="menuWidth" :time="system.time" />
+            </q-scroll-area>
+        </q-drawer>
+
+        <q-page-container :class="containerClass" :style="containerStyle"> <!-- Error message -->
+            <div class="q-gutter-sm q-pa-sm" v-if="system.devMode && $light.errors.length > 0">
+                <q-banner dense inline-actions class="bg-grey-4" v-for="error in $light.errors" rounded>
+                    {{ error }}
+                    <template v-slot:action>
+                        <q-btn flat icon="sym_o_close" round dense @click="$light.removeError(error)" />
+                    </template>
+                </q-banner>
+
+            </div>
+
+            <!-- router-view v-slot="{ Component }">
+
+                <template v-if="Component">
+                    <suspense>
+                        <component :is="Component" :reloadMenu="reloadMenu"></component>
+                    </suspense>
+                </template>
+            </router-view -->
+            <NuxtLoadingIndicator />
+            <slot name="page-top"></slot>
+            <NuxtPage />
+            <slot name="page-bottom"></slot>
+        </q-page-container>
+        <q-footer bordered v-if="style.footer">
+            <q-item>
+                <q-item-section>
+                    {{ light.company }} {{ appVersion }} - Copyright {{ app.copyrightYear }} {{ app.copyrightName
+                    }}. Build
+                    {{ light.version }}
+                </q-item-section>
+            </q-item>
+        </q-footer>
+    </q-layout>
 </template>

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

@@ -8,11 +8,7 @@ type __VLS_Slots = {} & {
 } & {
     'page-bottom'?: (props: typeof __VLS_376) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    logout: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
-    onLogout?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -73,31 +73,31 @@ if (app.value.facebookAppId) {
 </script>
 
 <template>
-    <q-layout v-if="!app.logged">
-        <q-page-container class="bg-grey-2" style="color:#1f1f1f">
-            <q-page padding>
-                <div id="fb-root"></div>
-                <l-login v-bind="app" @login="app.logged = true"></l-login>
-            </q-page>
-        </q-page-container>
-    </q-layout>
-
-    <l-app-main v-else @logout="app.logged = false" v-bind="app">
-        <template #header>
-            <slot name="header"></slot>
-        </template>
-
-        <template #user-menu>
-            <slot name="user-menu"></slot>
-        </template>
-
-        <template #page-top>
-            <slot name="page-top"></slot>
-        </template>
-
-        <template #page-bottom>
-            <slot name="page-bottom"></slot>
-        </template>
-
-    </l-app-main>
+    <q-layout v-if="!app.logged">
+        <q-page-container class="bg-grey-2" style="color:#1f1f1f">
+            <q-page padding>
+                <div id="fb-root"></div>
+                <l-login v-bind="app" @login="app.logged = true"></l-login>
+            </q-page>
+        </q-page-container>
+    </q-layout>
+
+    <l-app-main v-else @logout="app.logged = false" v-bind="app">
+        <template #header>
+            <slot name="header"></slot>
+        </template>
+
+        <template #user-menu>
+            <slot name="user-menu"></slot>
+        </template>
+
+        <template #page-top>
+            <slot name="page-top"></slot>
+        </template>
+
+        <template #page-bottom>
+            <slot name="page-bottom"></slot>
+        </template>
+
+    </l-app-main>
 </template>

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

@@ -6,12 +6,12 @@ const modelValue = defineModel({ type: Object, ...{
 </script>
 
 <template>
-    <l-card title="Audit info">
-        <l-list>
-            <l-item label="Created time" v-if="modelValue.createdTime">{{ modelValue.createdTime }}</l-item>
-            <l-item label="Created by" v-if="modelValue.createdBy">{{ modelValue.createdBy }}</l-item>
-            <l-item label="Updated time" v-if="modelValue.updatedTime">{{ modelValue.updatedTime }}</l-item>
-            <l-item label="Updated by" v-if="modelValue.updatedBy">{{ modelValue.updatedBy }}</l-item>
-        </l-list>
-    </l-card>
+    <l-card title="Audit info">
+        <l-list>
+            <l-item label="Created time" v-if="modelValue.createdTime">{{ modelValue.createdTime }}</l-item>
+            <l-item label="Created by" v-if="modelValue.createdBy">{{ modelValue.createdBy }}</l-item>
+            <l-item label="Updated time" v-if="modelValue.updatedTime">{{ modelValue.updatedTime }}</l-item>
+            <l-item label="Updated by" v-if="modelValue.updatedBy">{{ modelValue.updatedBy }}</l-item>
+        </l-list>
+    </l-card>
 </template>