@hostlink/nuxt-light 0.0.66 → 0.0.68

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.66"
+  "version": "0.0.68"
 }

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

@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import { useQuasar, QTable } from 'quasar';
-import { useRoute } from 'vue-router';
 import { ref, computed, onMounted, useSlots, reactive, useAttrs } from "vue";
 import { t, deleteObject, q, f, useLight } from '../';
 
-const route = useRoute();
-const module = route.path.split("/")[1];
 const errors = ref<InstanceType<any>>([]);
 
 const light = useLight();
 const props = defineProps({
+    debug: {
+        type: Boolean,
+        default: false
+    },
     columns: {
         type: Array<{
             label: string,
@@ -35,8 +36,7 @@ const props = defineProps({
         default: "Records per page:"
     },
     rows: {
-        type: Array,
-        default: () => []
+        type: Array
     },
     rowKey: {
         type: String,
@@ -45,18 +45,30 @@ const props = defineProps({
     modelName: {
         type: String,
         default: null
-    }, pagination: {
-        type: Boolean,
-        default: true
     },
     selection: {
         type: String,
         default: "none"
+    },
+    rowsPerPageOptions: {
+        type: Array,
+        default: () => [3, 5, 7, 10, 15, 20, 25, 50, 0]
+    }, pagination: {
+        type: Object,
+        default: () => {
+            return {
+                sortBy: "",
+                descending: true,
+                page: 1,
+                rowsPerPage: 10,
+            }
+        }
     }
 })
 
-const hideBottom = ref(false)
-
+if (props.rowsPerPageOptions[0] == 0) {
+    props.pagination.rowsPerPage = 0;
+}
 
 //apply all aligns to the columns 
 props.columns?.forEach((col) => {
@@ -71,7 +83,7 @@ props.columns?.forEach((col) => {
 })
 
 const renderColumns = computed(() => {
-    if (!props.columns) return null;
+    if (props.columns == undefined) return undefined;
 
     let cols = [];
     if (props.actions.length > 0) {
@@ -109,18 +121,11 @@ if (props.actions.length > 0) {
 }
 
 
-const pagination = ref({
-    sortBy: "",
-    descending: true,
-    page: 1,
-    rowsPerPage: 10,
-    rowsNumber: 0
-})
 
 if (props.sortBy) {
     let [sortBy, descending] = props.sortBy.split(":");
-    pagination.value.sortBy = sortBy;
-    pagination.value.descending = descending == "desc";
+    props.pagination.sortBy = sortBy;
+    props.pagination.descending = descending == "desc";
 }
 
 const hasSearch = computed(() => {
@@ -214,6 +219,10 @@ const onRequest = async (p: any) => {
             //
             let localFields: Array<any> = [];
 
+            if (props.rowKey) {
+                localFields.push(props.rowKey);
+            }
+
             fields.forEach((f) => {
                 localFields.push(f);
             });
@@ -270,11 +279,11 @@ const onRequest = async (p: any) => {
             modelName.value = allData.meta.name;
 
 
-            pagination.value.rowsPerPage = p.pagination.rowsPerPage;
-            pagination.value.page = p.pagination.page;
-            pagination.value.sortBy = p.pagination.sortBy;
-            pagination.value.descending = p.pagination.descending;
-            pagination.value.rowsNumber = allData.meta.total;
+            props.pagination.rowsPerPage = p.pagination.rowsPerPage;
+            props.pagination.page = p.pagination.page;
+            props.pagination.sortBy = p.pagination.sortBy;
+            props.pagination.descending = p.pagination.descending;
+            props.pagination.rowsNumber = allData.meta.total;
             loading.value = false;
             validateData()
 
@@ -317,9 +326,9 @@ const onFilters = () => {
     onRequest({
         pagination: {
             page: 1,
-            rowsPerPage: pagination.value.rowsPerPage,
-            sortBy: pagination.value.sortBy,
-            descending: pagination.value.descending
+            rowsPerPage: props.pagination.rowsPerPage,
+            sortBy: props.pagination.sortBy,
+            descending: props.pagination.descending
         }
     })
 }
@@ -351,14 +360,6 @@ const onDelete = async (id: any) => {
 
 //style
 
-let rowsPerPageOptions = [3, 5, 7, 10, 15, 20, 25, 50, 0];
-if (props.pagination == false) {
-    hideBottom.value = true;
-    pagination.value = null;
-    rowsPerPageOptions = [0]
-}
-
-
 const attrs = {
     ...{
         dense: light.getStyle("tableDense", false),
@@ -368,7 +369,6 @@ const attrs = {
     ...useAttrs()
 }
 
-
 </script>
 <template>
     <template v-if="errors.length > 0">
@@ -379,13 +379,24 @@ const attrs = {
         </div>
     </template>
 
-    <q-table v-bind="$attrs" :flat="attrs.flat" :dense="attrs.dense" :bordered="attrs.bordered" :row-key="rowKey"
-        :loading="loading" :hide-bottom="hideBottom" v-model:pagination="pagination" ref="table" @request="onRequest"
-        :rows="rows" :rows-per-page-label="$t(props.rowsPerPageLabel)" :columns="renderColumns"
-        :rows-per-page-options="rowsPerPageOptions"
-        :selection="selection"
-        
-        >
+    <template v-if="debug">
+        <pre>primaryKey:{{ primaryKey }}
+        modelName:{{ modelName }}
+        filters:{{ filters }}
+        pagination:{{ pagination }}
+        actionView:{{ actionView }}
+        actionDelete:{{ actionDelete }}
+        activeEdit:{{ activeEdit }}
+        attrs:{{ attrs }}
+        $attrs:{{ $attrs }}
+    </pre>
+        rows:{{ props.rows }}
+    </template>
+
+    <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" :pagination="pagination">
+
 
         <template v-for="s in ss" v-slot:[s]="props">
             <slot :name="s" v-bind="props"></slot>
@@ -397,9 +408,10 @@ const attrs = {
                 <div class="text-grey-8">
 
                     <l-view-btn v-if="actionView && props.row.canView"
-                        :to="`/${modelName}/${props.row[primaryKey]}/view`"></l-view-btn>
+                        :to="`/${modelName}/${props.row[primaryKey]}/view`" />
 
-                    <l-edit-btn :to="`/${modelName}/${props.row[primaryKey]}/edit`" v-if="activeEdit"></l-edit-btn>
+                    <l-edit-btn :to="`/${modelName}/${props.row[primaryKey]}/edit`"
+                        v-if="activeEdit && props.row.canUpdate" />
 
                     <l-delete-btn v-if="actionDelete && props.row.canDelete"
                         @submit="onDelete(props.row[primaryKey])"></l-delete-btn>

package/package.json

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