@hostlink/nuxt-light 0.0.106 → 0.0.107

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.106"
+  "version": "0.0.107"
 }

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

@@ -10,6 +10,7 @@ const props = defineProps({
         type: String,
         default: null
     }
+
 });
 
 

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

@@ -174,7 +174,12 @@ onMounted(() => {
 <template>
   <q-card bordered flat style="min-width:360px;max-width: 400px;" class="fixed-center">
     <q-card-section>
-      <q-img :src="light.getCompanyLogo()" class="full-width" />
+      <q-img :src="light.getCompanyLogo()" class="full-width">
+        <template v-slot:error>
+          <q-img src="https://raw.githubusercontent.com/HostLink/.github/master/profile/logo.webp" class="full-width" />
+        </template>
+      </q-img>
+
       <div class="text-h6">
         {{ light.getCompany() }}
       </div>

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

@@ -1,8 +1,19 @@
 <script setup lang="ts">
-import { useQuasar, QTable, is } from 'quasar';
+import { useQuasar, QTable } from 'quasar';
 import { ref, computed, onMounted, useSlots, useAttrs } from "vue";
 import { t, q, useLight, GQLFieldBuilder, model } from '../';
 import { toQuery } from '@hostlink/light';
+import { type QTableColumn } from 'quasar';
+
+// extends QTableColumn
+export interface LTableColumn extends QTableColumn {
+    searchable?: boolean,
+    searchType?: string,
+    searchOptions?: Array<any> | Function,
+    searchMultiple?: boolean,
+    gqlField?: string | Array<string> | Object,
+    backgroundColor?: string | Function
+}
 
 const errors = ref<InstanceType<any>>([]);
 
@@ -13,18 +24,7 @@ const props = defineProps({
         default: false
     },
     columns: {
-        type: Array<{
-            label: string,
-            name: string,
-            align?: "left" | "right" | "center" | undefined,
-            sortable?: boolean,
-            searchable?: boolean,
-            searchType?: string,
-            searchOptions?: Array<any> | Function,
-            searchMultiple?: boolean,
-            field?: string | Object,
-            gqlField?: string | Array<string> | Object,
-        }>
+        type: Array<LTableColumn>
     },
     actions: {
         type: Array,
@@ -109,25 +109,7 @@ if (props.columns) {
     }
 }
 
-const renderColumns = computed(() => {
-    if (props.columns == undefined) return undefined;
-
-    let cols = [];
-    if (props.actions.length > 0) {
-        cols = [
-            {
-                name: "_actions",
-                align: "left"
-            },
-            ...props.columns ?? []
-        ]
-    } else {
-        cols = props.columns;
-    }
-    return cols;
-})
-
-interface LTableRequest {
+export interface LTableRequest {
     sort: string,
     fields: Array<string>,
     gql: {
@@ -481,8 +463,35 @@ const isDark = computed(() => {
     return light.theme == "dark";
 })
 
+const hasRowExpand = computed(() => {
+    return ss.indexOf("row-expand") >= 0;
+})
+
+const hasActions = computed(() => {
+    return props.actions.length > 0;
+})
+
+const getCellStyle = (col: any, row: any) => {
+    const style: any = {};
+    if (col.whiteSpace) {
+        style.whiteSpace = col.whiteSpace;
+    }
+    if (col.backgroundColor) {
+        if (typeof col.backgroundColor == "function") {
+            style.backgroundColor = col.backgroundColor(row);
+        } else {
+            style.backgroundColor = col.backgroundColor;
+        }
+
+    }
+    return style;
+
+
+}
+
 </script>
 
+
 <template>
     <template v-if="errors.length > 0">
         <div class="q-gutter-sm">
@@ -507,9 +516,67 @@ const isDark = computed(() => {
 
 
     <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"
-        :no-data-label="$t('No data available')" :loading-label="$t('Loading...')">
+        :rows-per-page-label="$t(props.rowsPerPageLabel)" :columns="columns" :rows-per-page-options="rowsPerPageOptions"
+        :selection="selection" v-model:pagination="pagination" :filter="filter" :no-data-label="$t('No data available')"
+        :loading-label="$t('Loading...')">
+
+
+        <!-- template v-for="s in ss" v-slot:[s]="props">
+            <slot :name="s" v-bind="props"></slot>
+        </template -->
+
+        <template #header="props">
+            <q-tr :props="props">
+                <q-th v-if="hasRowExpand" auto-width></q-th>
+                <q-th v-if="hasActions" auto-width></q-th>
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">{{ col.label }}</q-th>
+            </q-tr>
+        </template>
+
+        <template #body="props">
+            <q-tr :props="props">
+                <q-td v-if="hasRowExpand" auto-width>
+                    <q-btn :class="{ 'text-grey-8': !isDark }" flat round dense
+                        :icon="props.expand ? 'sym_o_expand_more' : 'sym_o_expand_less'"
+                        @click="props.expand = !props.expand"></q-btn>
+                </q-td>
+
+                <q-td v-if="hasActions" auto-width>
+                    <div :class="{ 'text-grey-8': !isDark }">
+
+                        <l-view-btn v-if="actionView && props.row.canView"
+                            :to="`/${modelName}/${props.row[primaryKey]}/view`" />
+
+                        <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>
+
+                        <slot name="actions" v-bind="props"></slot>
+                    </div>
+
+                </q-td>
+
+                <template v-for="col in props.cols">
+                    <template v-if="ss.indexOf('body-cell-' + col.name) >= 0">
+                        <slot :name="'body-cell-' + col.name" v-bind="props"></slot>
+                    </template>
+                    <template v-else>
+                        <q-td :key="col.name" :props="props" :auto-width="col.autoWidth ?? false"
+                            :style="getCellStyle(col, props.row)"><template v-if="col.to" class="bg-primary">
+                                <l-link :to="col.to(props.row)">{{ col.value }}</l-link>
+                            </template><template v-else>{{ col.value }}</template></q-td>
+                    </template>
+                </template>
+            </q-tr>
+            <q-tr v-show="props.expand" :props="props">
+                <q-td colspan="100%">
+                    <slot name="row-expand" v-bind="props"></slot>
+                </q-td>
+            </q-tr>
+        </template>
+
 
         <template #top-right="props" v-if="fullscreen || searchable">
             <q-input v-if="searchable" outlined dense debounce="300" v-model="filter" placeholder="Search">
@@ -522,44 +589,21 @@ const isDark = computed(() => {
                 @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">
+        <!-- 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>
-                <div :class="{ 'text-grey-8': !isDark }">
-
-                    <l-view-btn v-if="actionView && props.row.canView"
-                        :to="`/${modelName}/${props.row[primaryKey]}/view`" />
-
-                    <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>
-
-                    <slot name="actions" v-bind="props"></slot>
-                </div>
-            </q-td>
-        </template>
-
-
+        </template -->
 
 
         <template #top-row="props" v-if="hasSearch && isServerSide">
             <q-tr>
-                <q-td v-if="selection != 'none'" auto-width>
-
-                </q-td>
+                <q-td v-if="selection != 'none'" auto-width />
+                <q-td v-if="hasRowExpand" auto-width />
+                <q-td v-if="hasActions" auto-width />
                 <q-td v-for="col in props.cols">
                     <template v-if="col.searchable">
 
@@ -570,7 +614,8 @@ const isDark = computed(() => {
 
                         <template v-if="col.searchType == 'select'">
                             <q-select dense v-model="filters[col.name]" @update:model-value="onFilters" clearable
-                                :options="col.searchOptions" emit-value map-options :multiple="col.searchMultiple" />
+                                options-dense :options="col.searchOptions" emit-value map-options
+                                :multiple="col.searchMultiple" />
 
                         </template>
 

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

@@ -0,0 +1,50 @@
+<script setup>
+import { useSlots } from "vue";
+
+const slots = useSlots();
+
+const ss = Object.entries(slots).map(([key, value]) => {
+    return key;
+});
+
+
+
+</script>
+<template>
+    <q-table row-key="name">
+
+        <template #header="props">
+
+
+            <q-tr :props="props">
+
+                <q-th auto-width key="_expand" :props="{
+                    colsMap: {
+                        _expand: {
+                            align: 'right'
+                        }
+                    }
+                }">1</q-th>
+
+                <q-th auto-width key="_actions">act</q-th>
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">{{ col.label }}</q-th>
+            </q-tr>
+        </template>
+
+        <template #body="props">
+
+            <q-tr :props="props">
+                <template v-for="col in props.cols">
+                    <slot v-if="slots['body-cell-' + col.name]" :name="'body-cell-' + col.name" v-bind="props"
+                        :key="col.name"></slot>
+                    <template v-else>
+                        <q-td :props="props" :key="col.name">
+                            {{ col.name }}
+                            {{ col.value }}</q-td>
+                    </template>
+                </template>
+            </q-tr>
+
+        </template>
+    </q-table>
+</template>

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

@@ -1,10 +1,7 @@
-declare const _default: (name: string) => {
-    name: string;
-    update(id: number, data: Object): Promise<any>;
-    delete(id: number): Promise<any>;
-    add(data: Object): Promise<any>;
-    fields(fields: string[]): import("@hostlink/light").ModelField[];
-    get(filters: any, fields: import("@hostlink/light").Fields): Promise<any>;
-    list(filters: any, fields: import("@hostlink/light").Fields): Promise<any>;
-};
+import { model } from "@hostlink/light";
+import type { LTableColumn } from "../components/l-table.vue";
+interface LModel extends ReturnType<typeof model> {
+    columns(fields: string[]): Array<LTableColumn>;
+}
+declare const _default: (name: string) => LModel;
 export default _default;

package/dist/runtime/lib/model.mjs

@@ -15,5 +15,4 @@ export default (name) => {
       return columns;
     }
   });
-  return m;
 };

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

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

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

@@ -2,13 +2,6 @@
 import { model } from "#imports"
 import { ref } from 'vue'
 const columns = model("MailLog").columns(["maillog_id", "from", "to", "subject", "created_time"])
-
-
-columns.push({
-    label: "Content",
-    name: "_act",
-    gqlField: ["body"]
-})
 const show = ref(false)
 const content = ref("")
 </script>
@@ -22,18 +15,11 @@ const content = ref("")
                 </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>
+        <l-table row-key="maillog_id" @request="$event.loadObjects('MailLog', {}, ['body'])" :columns="columns"
+            sort-by="maillog_id:desc" >
 
+            <template #row-expand="props">
+                <iframe width="100%" height="300px" :srcdoc="props.row.body" frameborder="0"></iframe>
             </template>
 
         </l-table>

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

@@ -1,9 +1,22 @@
 <script setup>
-import { q } from '../../'
+import { q } from '#imports'
 const system = await q("system", ["server"])
+
+const columns = [
+    {
+        name: "name",
+        label: "Name"
+    },
+    {
+        name: "value",
+        label: "Value",
+        whiteSpace: "pre-wrap"
+    },
+]
+
 </script>
 <template>
     <l-page>
-        <q-table :rows="system.server" :rows-per-page-options="[0]" hide-pagination flat bordered></q-table>
+        <l-table :rows="system.server" :columns="columns" :rows-per-page-options="[0]" hide-pagination></l-table>
     </l-page>
 </template>

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

@@ -14,8 +14,8 @@ const status = ref("0");
 
         <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-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']">

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

@@ -3,6 +3,7 @@ declare const _default: {
         label: string;
         sortable: boolean;
         searchable: boolean;
+        autoWidth: boolean;
     };
     class: {
         label: string;

package/dist/runtime/types/EventLog.mjs

@@ -2,7 +2,8 @@ export default {
   eventlog_id: {
     label: "EventLog ID",
     sortable: true,
-    searchable: true
+    searchable: true,
+    autoWidth: true
   },
   class: {
     label: "Class",

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

@@ -4,6 +4,7 @@ declare const _default: {
         sortable: boolean;
         searchable: boolean;
         searchType: string;
+        autoWidth: boolean;
     };
     from: {
         label: string;

package/dist/runtime/types/MailLog.mjs

@@ -3,7 +3,8 @@ export default {
     label: "ID",
     sortable: true,
     searchable: true,
-    searchType: "number"
+    searchType: "number",
+    autoWidth: true
   },
   from: {
     label: "From",

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

@@ -3,6 +3,7 @@ declare const _default: {
         label: string;
         sortable: boolean;
         searchable: boolean;
+        style: string;
     };
     first_name: {
         label: string;
@@ -44,5 +45,13 @@ declare const _default: {
         }[];
         format: (value: any) => string;
     };
+    test: {
+        label: string;
+        name: string;
+        to: (row: any) => string;
+        gqlField: string[];
+        field: (row: any) => any;
+        backgroundColor: (row: any) => "primary" | undefined;
+    };
 };
 export default _default;

package/dist/runtime/types/User.mjs

@@ -2,7 +2,17 @@ export default {
   username: {
     label: "Username",
     sortable: true,
-    searchable: true
+    searchable: true,
+    style: "white-space: nowrap;"
+    /* backgroundColor: (row: any) => {
+        
+        
+        if (row.username == "admin") {
+            return "red";
+        } else {
+            return "white";
+        }
+    } */
   },
   first_name: {
     label: "First name",
@@ -45,13 +55,17 @@ export default {
     format: (value) => {
       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,
-  } */
+    label: "Test",
+    name: "_test",
+    to: (row) => `/User/${row.user_id}/view`,
+    gqlField: ["user_id", "first_name"],
+    field: (row) => row.first_name,
+    backgroundColor: (row) => {
+      if (row.username == "admin") {
+        return "primary";
+      }
+    }
+  }
 };

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

@@ -3,6 +3,7 @@ declare const _default: {
         label: string;
         sortable: boolean;
         searchable: boolean;
+        autoWidth: boolean;
     };
     username: {
         label: string;
@@ -29,11 +30,13 @@ declare const _default: {
             label: string;
             value: string;
         }[];
+        autoWidth: boolean;
     };
     user_agent: {
         label: string;
         sortable: boolean;
         searchable: boolean;
+        whiteSpace: string;
     };
 };
 export default _default;

package/dist/runtime/types/UserLog.mjs

@@ -2,7 +2,8 @@ export default {
   userlog_id: {
     label: "ID",
     sortable: true,
-    searchable: true
+    searchable: true,
+    autoWidth: true
   },
   username: {
     label: "User",
@@ -34,11 +35,13 @@ export default {
         label: "FAIL",
         value: "FAIL"
       }
-    ]
+    ],
+    autoWidth: true
   },
   user_agent: {
     label: "User agent",
     sortable: true,
-    searchable: true
+    searchable: true,
+    whiteSpace: "pre-line"
   }
 };

package/package.json

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