@hostlink/nuxt-light 0.0.80 → 0.0.81

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.80"
+  "version": "0.0.81"
 }

package/dist/module.mjs

@@ -53,7 +53,7 @@ const module = defineNuxtModule({
       { name: "listObject", from },
       { name: "useLight", from: index },
       { name: "isGranted", from },
-      { name: "getTypeColumns", from },
+      { name: "getObjectColumns", from },
       { name: "defineType", from }
     ]);
     addPlugin({

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

@@ -1,20 +1,24 @@
 <script setup>
-defineProps({
+import { inject } from 'vue'
+const props = defineProps({
     label: {
         type: String,
-        required: true
     },
     type: {
         type: String,
         default: "text"
+    }, name: {
+        type: String,
+        default: null
     }
 });
+
+
 </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>

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

@@ -1,5 +1,51 @@
+<script setup>
+
+const props = defineProps({
+    modelValue: {
+        type: Object
+    },
+    columns: {
+        type: Array
+    }
+})
+
+const getValue = (column) => {
+
+    //type of column field is function
+    if (column.field && typeof column.field == 'function') {
+        return column.field(props.modelValue);
+    }
+
+    //if field is string
+    if (column.field && typeof column.field == 'string') {
+        return props.modelValue[column.field];
+    }
+
+    return props.modelValue[column.name];
+
+}
+const getDisplayValue = (column) => {
+    const value = getValue(column);
+
+    if (column.format) {
+        return column.format(value);
+    }
+    return value;
+
+}
+
+</script>
 <template>
     <q-list bordered separator>
-        <slot></slot>
+        <template v-if="columns">
+            <l-item v-for="column in columns" :label="column.label">
+                {{ getDisplayValue(column) }}
+            </l-item>
+
+        </template>
+        <template v-else>
+            <slot></slot>
+        </template>
+
     </q-list>
 </template>

package/dist/runtime/lib/{defineType.d.ts → defineObject.d.ts}

@@ -1,3 +1,3 @@
-declare const _default: (type: string, fields: Object) => void;
+declare const _default: (name: string, fields: Object) => void;
 export default _default;
 export declare const getData: () => any;

package/dist/runtime/lib/defineObject.mjs

@@ -0,0 +1,5 @@
+let data = {};
+export default (name, fields) => {
+  data[name] = fields;
+};
+export const getData = () => data;

package/dist/runtime/lib/getID.mjs

@@ -1,13 +1,12 @@
 import { useRoute } from "vue-router";
 const route = useRoute();
 export default () => {
-  let route2 = useRoute();
-  let name = route2.name?.toString();
+  let name = route.name?.toString();
   if (name == void 0)
     return 0;
   let parts = name.split("-");
   const module = parts[0];
   const moduleLower = module.charAt(0).toLowerCase() + module.slice(1);
   const keyname = parts[1];
-  return parseInt(route2.params[keyname]);
+  return parseInt(route.params[keyname]);
 };

package/dist/runtime/lib/getObject.mjs

@@ -1,5 +1,6 @@
 import { useRoute } from "vue-router";
 import loadObject from "./loadObject.mjs";
+import getObjectColumn from "./getObjectColumn.mjs";
 export default async function(fields = []) {
   let route = useRoute();
   if (!route.name) {
@@ -12,5 +13,14 @@ export default async function(fields = []) {
   if (fields instanceof Array && fields.length == 0) {
     fields.push(id_name);
   }
-  return await loadObject(module, filters, fields);
+  let fs = fields.map((field) => {
+    if (typeof field == "string") {
+      const column = getObjectColumn(module, field);
+      if (column && column.gqlField) {
+        return column.gqlField;
+      }
+    }
+    return field;
+  });
+  return await loadObject(module, filters, fs);
 }

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

@@ -0,0 +1,2 @@
+declare const _default: (type: string, name: string) => any;
+export default _default;

package/dist/runtime/lib/getObjectColumn.mjs

@@ -0,0 +1,15 @@
+import { getData } from "./defineObject.mjs";
+export default (type, name) => {
+  let data = getData();
+  if (!data[type])
+    return;
+  if (!data[type][name])
+    return;
+  let options = data[type][name];
+  if (!options)
+    return;
+  if (!options.name) {
+    options.name = name;
+  }
+  return options;
+};

package/dist/runtime/lib/{getTypeColumns.mjs → getObjectColumns.mjs}

@@ -1,4 +1,4 @@
-import { getData } from "./defineType.mjs";
+import { getData } from "./defineObject.mjs";
 export default (type, names) => {
   let data = getData();
   let columns = [];

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

@@ -15,9 +15,9 @@ import listObject from "./listObject";
 import loadObject from "./loadObject";
 import isGranted from "./isGranted";
 import GQLFieldBuilder from "./GQLFieldBuilder";
-import getTypeColumns from "./getTypeColumns";
+import getObjectColumns from "./getObjectColumns";
 declare const notify: (message: string, color?: string) => void;
 import getID from "./getID";
 declare const getApiBase: () => {};
-import defineType from './defineType';
-export { addObject, f, getApiUrl, getCurrentUser, getObject, list, listData, m, q, removeObject, t, updateObject, notify, getID, deleteObject, listObject, isGranted, getApiBase, loadObject, GQLFieldBuilder, defineType, getTypeColumns };
+import defineObject from './defineObject';
+export { addObject, f, getApiUrl, getCurrentUser, getObject, list, listData, m, q, removeObject, t, updateObject, notify, getID, deleteObject, listObject, isGranted, getApiBase, loadObject, GQLFieldBuilder, defineObject, getObjectColumns };

package/dist/runtime/lib/index.mjs

@@ -17,7 +17,7 @@ import listObject from "./listObject.mjs";
 import loadObject from "./loadObject.mjs";
 import isGranted from "./isGranted.mjs";
 import GQLFieldBuilder from "./GQLFieldBuilder.mjs";
-import getTypeColumns from "./getTypeColumns.mjs";
+import getObjectColumns from "./getObjectColumns.mjs";
 const notify = function(message, color = "green") {
   Notify.create({
     message,
@@ -30,7 +30,7 @@ const getApiBase = () => {
   const config = useRuntimeConfig();
   return config?.public?.apiBase ?? "/api/";
 };
-import defineType from "./defineType.mjs";
+import defineObject from "./defineObject.mjs";
 export {
   addObject,
   f,
@@ -52,6 +52,6 @@ export {
   getApiBase,
   loadObject,
   GQLFieldBuilder,
-  defineType,
-  getTypeColumns
+  defineObject,
+  getObjectColumns
 };

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

@@ -1,8 +1,8 @@
 <script setup>
 import { ref } from 'vue'
-import getTypeColumns from "../../lib/getTypeColumns";
+import getObjectColumns from "../../lib/getObjectColumns";
 import sv from "../../lib/sv";
-const columns = getTypeColumns("SystemValue", ["name", "value"]);
+const columns = getObjectColumns("SystemValue", ["name", "value"]);
 </script>
 <template>
     <l-page>

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

@@ -1,13 +1,6 @@
 <script setup>
-import { getObject, loadObject } from '../../../';
+import { getObject, getObjectColumns } from '../../../';
 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 () => {
-    console.log(await loadObject("User", { user_id: obj.user_id }, ["username"]));
-}
- */
-
 </script>
 
 <template>
@@ -18,16 +11,16 @@ const obj = await getObject(["user_id", "username", "first_name", "last_name", "
         </template>
 
         <l-card>
-            <l-list>
-                <l-item label="Username">{{ obj.username }}</l-item>
-                <l-item label="First name">{{ obj.first_name }}</l-item>
-                <l-item label="Last name">{{ obj.last_name }}</l-item>
-                <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 v-model="obj" :columns="getObjectColumns('User', [
+                'username',
+                'first_name',
+                'last_name',
+                'email',
+                'phone',
+                'roles',
+                'status',
+                'join_date'
+            ])">
             </l-list>
         </l-card>
     </l-page>

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

@@ -1,10 +1,10 @@
 <script setup>
 import { ref } from 'vue'
-import getTypeColumns from "../../lib/getTypeColumns";
+import getObjectColumns from "../../lib/getObjectColumns";
 const onRequest = async (request) => {
     request.loadObjects("User", { status: status.value });
 };
-const columns = getTypeColumns("User", ["username", "first_name", "label_name", "email", "phone", "join_date"]);
+const columns = getObjectColumns("User", ["username", "first_name", "label_name", "email", "phone", "join_date"]);
 const status = ref("0");
 </script>
 

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

@@ -1,6 +1,6 @@
 <script setup>
-import getTypeColumns from "../../lib/getTypeColumns";
-const columns = getTypeColumns("UserLog", ["userlog_id", "username", "login_dt", "logout_dt", "result", "user_agent"]);
+import getObjectColumns from "../../lib/getObjectColumns";
+const columns = getObjectColumns("UserLog", ["userlog_id", "username", "login_dt", "logout_dt", "result", "user_agent"]);
 </script>
 <template>
     <l-page>

package/dist/runtime/plugin.mjs

@@ -7,14 +7,14 @@ import message_en from "./locales/en.json";
 import message_zh from "./locales/zh-hk.json";
 import routes from "./routes.mjs";
 localStorage.getItem("locale") || localStorage.setItem("locale", "en");
-import { useLight, defineType } from "./index.mjs";
+import { useLight, defineObject } from "./index.mjs";
 import TypeUser from "./types/User.mjs";
 import TypeUserLog from "./types/UserLog.mjs";
 import TypeSystemValue from "./types/SystemValue.mjs";
 export default defineNuxtPlugin((nuxtApp) => {
-  defineType("User", TypeUser);
-  defineType("UserLog", TypeUserLog);
-  defineType("SystemValue", TypeSystemValue);
+  defineObject("User", TypeUser);
+  defineObject("UserLog", TypeUserLog);
+  defineObject("SystemValue", TypeSystemValue);
   nuxtApp.vueApp.config.errorHandler = (error) => {
     console.log(error);
     const light = useLight();

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

@@ -30,5 +30,13 @@ declare const _default: {
         searchable: boolean;
         searchType: string;
     };
+    roles: {
+        label: string;
+        format: (value: any) => any;
+    };
+    status: {
+        label: string;
+        format: (value: any) => "Active" | "Inactive";
+    };
 };
 export default _default;

package/dist/runtime/types/User.mjs

@@ -5,12 +5,12 @@ export default {
     searchable: true
   },
   first_name: {
-    label: "First Name",
+    label: "First name",
     sortable: true,
     searchable: true
   },
   last_name: {
-    label: "Last Name",
+    label: "Last name",
     sortable: true,
     searchable: true
   },
@@ -25,9 +25,19 @@ export default {
     searchable: true
   },
   join_date: {
-    label: "Join Date",
+    label: "Join date",
     sortable: true,
     searchable: true,
     searchType: "date"
+  },
+  roles: {
+    label: "Roles",
+    format: (value) => value.join(", ")
+  },
+  status: {
+    label: "Status",
+    format: (value) => {
+      return value == 0 ? "Active" : "Inactive";
+    }
   }
 };

package/package.json

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

package/dist/runtime/lib/defineType.mjs

@@ -1,5 +0,0 @@
-let data = {};
-export default (type, fields) => {
-  data[type] = fields;
-};
-export const getData = () => data;