@hostlink/nuxt-light 1.0.4 → 1.0.5

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.0.4"
+  "version": "1.0.5"
 }

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

@@ -180,7 +180,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <q-card bordered flat style="min-width:360px;max-width: 400px;" class="fixed-center">
+  <q-card bordered flat style="min-width:360px" class="fixed-center">
     <q-card-section>
       <q-img :src="light.getCompanyLogo()" class="full-width">
         <template v-slot:error>

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

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { useQuasar, QTable } from 'quasar';
+import { useQuasar, QTable, type QTableColumn, type QTableProps } 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 {
@@ -17,66 +18,37 @@ export interface LTableColumn extends QTableColumn {
 
 const errors = ref<InstanceType<any>>([]);
 
-const light = useLight();
-const props = defineProps({
-    debug: {
-        type: Boolean,
-        default: false
-    },
-    columns: {
-        type: Array<LTableColumn>
-    },
-    actions: {
-        type: Array,
-        default: () => []
-    },
-    sortBy: {
-        type: String,
-        default: null
-    },
-    rowsPerPageLabel: {
-        type: String,
-        default: "Records per page:"
-    },
-    rows: {
-        type: Array
-    },
-    rowKey: {
-        type: String,
-        default: null
-    },
-    modelName: {
-        type: String,
-        default: null
-    },
-    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,
-            }
+export interface LTableProps extends QTableProps {
+    columns?: Array<LTableColumn>,
+    actions?: Array<string>,
+    sortBy?: string | null | undefined,
+    rowKey?: string,
+    modelName?: string | null | undefined,
+    searchable?: boolean | null | undefined,
+    selected?: Array<any>,
+}
+
+const props = withDefaults(defineProps<LTableProps>(), {
+    actions: () => [],
+    rowsPerPageLabel: "Records per page:",
+    selection: "none",
+    rowsPerPageOptions: () => [3, 5, 7, 10, 15, 20, 25, 50, 0],
+    pagination: () => {
+        return {
+            sortBy: null,
+            descending: true,
+            page: 1,
+            rowsPerPage: 10,
         }
     },
-    fullscreen: {
-        type: Boolean,
-        default: false
-    },
-    searchable: {
-        type: Boolean,
-        default: false
-    }
-})
+    fullscreen: false,
+    searchable: false,
+    selected: () => [],
+    loadingLabel: "Loading...",
+    noDataLabel: "No data available",
+});
 
+const light = useLight();
 
 const pagination = ref(props.pagination);
 
@@ -133,7 +105,8 @@ export interface LTableRequest {
 }
 
 const emits = defineEmits<{
-    request: [p: LTableRequest]
+    request: [p: LTableRequest],
+    "update:selected": [p: Array<any>]
 }>()
 
 const loading = ref(false);
@@ -181,8 +154,13 @@ const modelName = ref(props.modelName);
 
 
 const validateData = () => {
+    if (primaryKey.value == null) return;
+
     if (props.actions.includes("edit")) {
         if (rows.value.length > 0) {
+
+
+
             //get first row
             let row = rows.value[0];
             //check has primary key
@@ -416,6 +394,7 @@ const ss = Object.entries(slots).map(([key, value]) => {
 
 const qua = useQuasar();
 const onDelete = async (id: any) => {
+    if (modelName.value == null) return;
 
     try {
         await model(modelName.value).delete(id);
@@ -439,7 +418,14 @@ const attrs = {
         bordered: light.getStyle("tableBorder"),
         separator: light.getStyle("tableSeparator"),
     },
-    ...useAttrs()
+    ...useAttrs(),
+    title: props.title,
+    loadingLabel: t(props.loadingLabel),
+    noDataLabel: t(props.noDataLabel),
+    rowsPerPageOptions: props.rowsPerPageOptions,
+    rowsPerPageLabel: t(props.rowsPerPageLabel),
+    selection: props.selection,
+    rowKey: props.rowKey,
 }
 
 const filter = ref('');
@@ -499,6 +485,16 @@ const getCellClass = (col: any, row: any) => {
     return cl;
 }
 
+const localSelected = computed({
+    get() {
+        return props.selected;
+    },
+    set(val) {
+        console.log(val)
+        emits("update:selected", val);
+    }
+});
+
 </script>
 
 
@@ -509,33 +505,14 @@ const getCellClass = (col: any, row: any) => {
         </div>
     </template>
 
-    <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="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 -->
+    <q-table v-bind="attrs" :loading="loading" :rows="rows" ref="table" @request="onRequest" :columns="columns"
+        v-model:pagination="pagination" :filter="filter" v-model:selected="localSelected">
 
         <template #header="props">
             <q-tr :props="props">
+                <q-td v-if="selection != 'none'" auto-width>
+                    <q-checkbox v-model="props.selected" />
+                </q-td>
                 <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>
@@ -544,6 +521,9 @@ const getCellClass = (col: any, row: any) => {
 
         <template #body="props">
             <q-tr :props="props">
+                <q-td v-if="selection != 'none'" auto-width>
+                    <q-checkbox v-model="props.selected" />
+                </q-td>
                 <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'"
@@ -551,7 +531,7 @@ const getCellClass = (col: any, row: any) => {
                 </q-td>
 
                 <q-td v-if="hasActions" auto-width>
-                    <div :class="{ 'text-grey-8': !isDark }">
+                    <div :class="{ 'text-grey-8': !isDark }" v-if="primaryKey">
 
                         <l-view-btn v-if="actionView && props.row.canView"
                             :to="`/${modelName}/${props.row[primaryKey]}/view`" />

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

@@ -7,11 +7,13 @@ const onRequest = async (request) => {
 };
 const columns = model("User").columns(["username", "first_name", "label_name", "email", "phone", "join_date", "status"]);
 const status = ref("0");
+const selected = ref([]);
 </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"

package/package.json

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