@hostlink/nuxt-light 0.0.71 → 0.0.73

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.71"
+  "version": "0.0.73"
 }

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

@@ -4,6 +4,7 @@ import { useAttrs } from 'vue'
 
 defineProps({
     loading: Boolean,
+    title: String
 })
 
 const light = useLight();
@@ -21,6 +22,9 @@ const attrs = {
 </script>
 <template>
     <q-card v-bind="attrs">
+        <q-toolbar v-if="title">
+            <q-toolbar-title>{{ title }}</q-toolbar-title>
+        </q-toolbar>
         <slot></slot>
 
         <q-inner-loading :showing="loading" label="Please wait..." label-class="text-primary" />

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

@@ -1,13 +1,33 @@
 <script setup>
-defineProps(["label"]);
+defineProps({
+    label: {
+        type: String,
+        required: true
+    },
+    type: {
+        type: String,
+        default: "text"
+    }
+});
 </script>
 <template>
     <q-item>
         <q-item-section>
             <q-item-label>{{ $t(label) }}</q-item-label>
+
+            <q-item-label caption v-if="type == 'caption'">
+                <div style="white-space: pre-wrap;">
+                    <slot></slot>
+                </div>
+            </q-item-label>
         </q-item-section>
-        <q-item-section side>
-            <q-item-label><slot></slot></q-item-label>
-        </q-item-section>
+
+        <template v-if="type == 'text'">
+            <q-item-section side>
+                <q-item-label>
+                    <slot></slot>
+                </q-item-label>
+            </q-item-section>
+        </template>
     </q-item>
 </template>

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

@@ -63,6 +63,14 @@ const props = defineProps({
                 rowsPerPage: 10,
             }
         }
+    },
+    fullscreen: {
+        type: Boolean,
+        default: false
+    },
+    searchable: {
+        type: Boolean,
+        default: false
     }
 })
 
@@ -286,7 +294,7 @@ const onRequest = async (p: any) => {
             pagination.value.sortBy = p.pagination.sortBy;
             pagination.value.descending = p.pagination.descending;
             pagination.value.rowsNumber = allData.meta.total;
-            
+
             loading.value = false;
             validateData()
 
@@ -372,6 +380,7 @@ const attrs = {
     ...useAttrs()
 }
 
+const filter = ref('');
 </script>
 <template>
     <template v-if="errors.length > 0">
@@ -398,7 +407,21 @@ const attrs = {
 
     <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">
+        :rows-per-page-options="rowsPerPageOptions" :selection="selection" v-model:pagination="pagination"
+        :filter="filter">
+
+        <template #top-right="props" v-if="fullscreen || searchable">
+            <q-input v-if="searchable" outlined dense debounce="300" v-model="filter" placeholder="Search">
+                <template v-slot:append>
+                    <q-icon name="search" />
+                </template>
+            </q-input>
+
+            <q-btn v-if="fullscreen" flat round dense :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
+                @click="props.toggleFullscreen" class="q-ml-md" />
+
+
+        </template>
 
 
         <template v-for="s in ss" v-slot:[s]="props">
@@ -413,8 +436,8 @@ const attrs = {
                     <l-view-btn v-if="actionView && props.row.canView"
                         :to="`/${modelName}/${props.row[primaryKey]}/view`" />
 
-                    <l-edit-btn :to="`/${modelName}/${props.row[primaryKey]}/edit`"
-                        v-if="activeEdit && props.row.canUpdate" />
+                    <l-edit-btn v-if="activeEdit && props.row.canUpdate"
+                        :to="`/${modelName}/${props.row[primaryKey]}/edit`" />
 
                     <l-delete-btn v-if="actionDelete && props.row.canDelete"
                         @submit="onDelete(props.row[primaryKey])"></l-delete-btn>

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

@@ -1,6 +1,6 @@
 <script setup>
 import { getObject, loadObject } from '../../../';
-const obj = await getObject(["user_id", "username", "first_name", "last_name", "email", "phone", "roles",'status']);
+const obj = await getObject(["user_id", "username", "first_name", "last_name", "email", "phone", "roles", 'status', 'join_date']);
 
 //await getObject(["user_id", { test: ["username"] }])
 /* const test = async () => {
@@ -16,7 +16,7 @@ const obj = await getObject(["user_id", "username", "first_name", "last_name", "
             <l-btn to="change-password" icon="sym_o_key" permission="user.changePassword" label="Change password"></l-btn>
             <l-btn to="update-role" icon="sym_o_people" permission="user.role.add" label="Update role"></l-btn>
         </template>
-        {{ obj }}
+
         <l-card>
             <l-list>
                 <l-item label="Username">{{ obj.username }}</l-item>
@@ -25,6 +25,9 @@ const obj = await getObject(["user_id", "username", "first_name", "last_name", "
                 <l-item label="Email">{{ obj.email }}</l-item>
                 <l-item label="Phone">{{ obj.phone }}</l-item>
                 <l-item label="Roles">{{ obj.roles.join(",") }}</l-item>
+                <l-item label="Status">{{ obj.status }}</l-item>
+                <l-item label="Join date">{{ obj.join_date }}</l-item>
+               
             </l-list>
         </l-card>
     </l-page>

package/package.json

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