@hostlink/nuxt-light 1.8.3 → 1.8.5

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.8.3"
+  "version": "1.8.5"
 }

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useLight, q, m } from '#imports'
-import { ref, computed } from 'vue'
+import { ref, computed, useSlots, onMounted } from 'vue'
 import { type QCardProps } from 'quasar';
 
 const minimized = defineModel<boolean>("minimized", { default: false })
@@ -16,7 +16,6 @@ export interface LCardProps extends QCardProps {
     closeable?: boolean
     minimizable?: boolean,
     maximizable?: boolean
-
 }
 
 const light = useLight();
@@ -26,6 +25,8 @@ const props = withDefaults(defineProps<LCardProps>(), {
     square: undefined,
 });
 
+
+
 const attrs = computed(() => {
     const a = { ...props };
     if (props.flat === undefined) a.flat = light.getStyle("cardFlat");
@@ -64,29 +65,29 @@ const roles = ref<{
 }[]>([]);
 
 if (props.permission && light.isAdmin) {
-    //get role 
-    const data = await q({
-        listRole: {
-            name: true
-        },
-        listPermission: {
-            __args: {
-                filters: {
-                    value: props.permission
-                }
-            }, data: {
-                role: true
-            }
-
-        }
-    });
-
-    roles.value = (data.listRole.map((r: any) => {
-        return {
-            name: r.name,
-            granted: data.listPermission.data.find((p: any) => p.role == r.name) != undefined
-        }
-    }));
+    /*   //get role 
+      const data = await q({
+          listRole: {
+              name: true
+          },
+          listPermission: {
+              __args: {
+                  filters: {
+                      value: props.permission
+                  }
+              }, data: {
+                  role: true
+              }
+  
+          }
+      });
+  
+      roles.value = (data.listRole.map((r: any) => {
+          return {
+              name: r.name,
+              granted: data.listPermission.data.find((p: any) => p.role == r.name) != undefined
+          }
+      })); */
 }
 
 const onUpdatePermission = async (role: any) => {
@@ -104,6 +105,35 @@ const onUpdatePermission = async (role: any) => {
     }
 }
 
+onMounted(async () => {
+    if (props.permission && light.isAdmin) {
+        //get role 
+        const data = await q({
+            listRole: {
+                name: true
+            },
+            listPermission: {
+                __args: {
+                    filters: {
+                        value: props.permission
+                    }
+                }, data: {
+                    role: true
+                }
+
+            }
+        });
+
+        roles.value = (data.listRole.map((r: any) => {
+            return {
+                name: r.name,
+                granted: data.listPermission.data.find((p: any) => p.role == r.name) != undefined
+            }
+        }));
+    }
+})
+
+
 
 
 </script>
@@ -133,9 +163,7 @@ const onUpdatePermission = async (role: any) => {
                 :icon="maximized ? 'sym_o_select_window_2' : 'sym_o_crop_square'" v-if="maximizable" />
             <q-btn dense flat icon="sym_o_close" v-close-popup v-if="closeable" />
         </q-bar>
-        <template v-if="!minimized || maximized">
-            <slot></slot>
-        </template>
+        <slot v-if="!minimized || maximized"></slot>
 
         <q-inner-loading :showing="loading" label="Please wait..." label-class="text-primary" />
     </q-card>

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import type { QTabProps } from 'quasar';
-defineProps<QTabProps>()
+import type { QTabPanelProps } from 'quasar';
+defineProps<QTabPanelProps>()
 </script>
 <template>
-    <q-tab></q-tab>
+    <q-tab-panel :name="name">
+        <slot></slot>
+    </q-tab-panel>
 </template>

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

@@ -1,57 +1,44 @@
 <script setup lang="ts">
-import { useLight } from '#imports'
-import { useSlots, computed, ref } from 'vue';
+import { useSlots } from 'vue';
 import type { QTabsProps } from 'quasar';
 
+const model = defineModel<string | number | null | undefined>()
 interface LTabsProps extends QTabsProps {
 
 }
 
-const light = useLight();
-const props = defineProps<LTabsProps>()
-const emit = defineEmits(["update:modelValue"])
+defineProps<LTabsProps>()
+
 const slots = useSlots();
-const defaultSlots = slots.default();
+const defaultSlots = slots.default ? slots.default() : []
 
 //get the tabs from the default slot
 let name = 0;
 const tabContents = defaultSlots.map((slot) => {
-    const n = slot.props.name || name++;
+    const n = slot.props?.name || name++;
     return {
-        label: slot.props.label,
+        label: slot.props?.label,
         content: slot.children,
         name: n.toString()
     }
 })
 
-const v = ref(null)
-
-if (tabContents.length > 0) {
-    v.value = tabContents[0].name
-}
-const localValue = computed({
-    get: () => props.modelValue || v.value,
-    set: (val) => {
-        v.value = val
-        emit("update:modelValue", val)
+if (model.value === null || model.value === undefined) {
+    if (tabContents.length > 0) {
+        model.value = tabContents[0].name
     }
-})
-
-
+}
 
 </script>
 
 <template>
     <l-card>
-        
         <q-tabs class="text-grey" :active-color="$light.color" :indicator-color="$light.color" align="justify"
-            v-model="localValue">
+            v-model="model">
             <q-tab v-for="tab in tabContents" :label="$t(tab.label)" :name="tab.name"></q-tab>
         </q-tabs>
-        <q-tab-panels v-model="localValue" keep-alive >
-            <q-tab-panel v-for="tab in tabContents" :name="tab.name">
-                <component :is="tab.content.default"></component>
-            </q-tab-panel>
+        <q-tab-panels v-model="model">
+            <component v-for="tab in tabContents" :key="tab.name" :is="tab.content?.default" :name="tab.name" />
         </q-tab-panels>
     </l-card>
 </template>

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

@@ -1,12 +1,11 @@
 <script setup>
 import { model } from "#imports"
-import { ref } from 'vue'
 const columns = model('EventLog').columns(['eventlog_id', 'class', 'id', 'action', 'created_time', 'username'])
 </script>
 <template>
     <l-page>
 
-        <l-table @request="$event.loadObjects('EventLog')" :columns="columns"
+        <l-table  @request="$event.loadObjects('EventLog')" :columns="columns"
             sort-by="eventlog_id:desc" :actions="['view']">
 
         </l-table>

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

@@ -2,22 +2,23 @@
 import { ref } from 'vue'
 import { model } from "#imports"
 const onRequest = async (request) => {
+
     request.loadObjects("User", { status: status.value });
 };
-const columns = model("User").columns(["username", "first_name", "label_name", "email", "phone", "join_date", "status","has2FA"]);
+const columns = model("User").columns(["username", "first_name", "label_name", "email", "phone", "join_date", "status", "has2FA"]);
 const status = ref("0");
 </script>
 
 <template>
     <l-page>
-
         <l-tabs v-model="status">
             <l-tab label="Active" name="0">
                 <l-table row-key="user_id" @request="onRequest" :columns="columns"
                     :actions="['view', 'edit', 'delete']"></l-table>
             </l-tab>
             <l-tab label="Inactive" name="1">
-                <l-table row-key="user_id" @request="onRequest" :columns="columns" :actions="['view', 'edit', 'delete']">
+                <l-table row-key="user_id" @request="onRequest" :columns="columns"
+                    :actions="['view', 'edit', 'delete']">
                 </l-table>
             </l-tab>
         </l-tabs>

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

@@ -62,8 +62,8 @@ eventLogCols.forEach(col => {
                     </q-card-section>
 
                     <q-card-section class="text-center text-center q-pt-none">
-                        <q-chip v-for="role in my.roles" :key="role" :label="role" :color="$light.color" text-color="white"
-                            class="q-ma-xs" />
+                        <q-chip v-for="role in my.roles" :key="role" :label="role" :color="$light.color"
+                            text-color="white" class="q-ma-xs" />
                     </q-card-section>
 
 
@@ -85,11 +85,13 @@ eventLogCols.forEach(col => {
 
                 <l-tabs>
                     <l-tab label="User Log">
-                        <l-table :rows="my.userLog.data" :columns="userlogColumns" searchable :rows-per-page-options="[0]">
+                        <l-table :rows="my.userLog.data" :columns="userlogColumns" searchable
+                            :rows-per-page-options="[0]">
                         </l-table>
                     </l-tab>
                     <l-tab label="Event Log">
-                        <l-table :rows="my.eventLog.data" :columns="eventLogCols" searchable :rows-per-page-options="[0]">
+                        <l-table :rows="my.eventLog.data" :columns="eventLogCols" searchable
+                            :rows-per-page-options="[0]">
                         </l-table>
                     </l-tab>
 

package/package.json

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