@hostlink/nuxt-light 0.0.76 → 0.0.78

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.76"
+  "version": "0.0.78"
 }

package/dist/runtime/components/l-app-main.vue

@@ -34,6 +34,7 @@ if (my.granted_storage) {
 
 light.setStyles(my.styles);
 
+
 const menus = ref(app.menus)
 
 const i18n = useI18n();
@@ -136,6 +137,9 @@ watch(() => style.color, async (value) => {
         name: "color",
         value: value
     })
+
+    my.styles["color"] = value;
+    light.setStyles(my.styles);
 })
 
 watch(() => style.theme, async (value) => {
@@ -191,7 +195,7 @@ const storageUsagePercent = computed(() => {
 
 <template>
     <q-layout :view="layoutView">
-        <q-header bordered class="text-white" :class="style.color">
+        <q-header bordered class="text-white" :class="`bg-${style.color}`">
             <q-toolbar>
                 <q-btn dense flat round icon="menu" class="q-mr-sm" @click="toggleLeftDrawer" />
 

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

@@ -9,7 +9,7 @@ defineProps({
 
 </script>
 <template>
-    <l-card>
+    <l-card title="Audit info">
         <l-list>
             <l-item label="Created time">{{ modelValue.createdTime }}</l-item>
             <l-item label="Created by">{{ modelValue.createdBy }}</l-item>

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

@@ -1,6 +1,6 @@
 <script setup>
 import { useLight } from '../'
-import { useAttrs } from 'vue'
+import { useAttrs, ref, computed } from 'vue'
 
 defineProps({
     loading: Boolean,
@@ -16,16 +16,27 @@ const attrs = {
         bordered: light.getStyle("cardBordered", true),
         square: light.getStyle("cardSquare", false),
     }, ...useAttrs()
-
 }
 
+const color = light.getStyle("color", 'primary');
+
+const cl = ["text-white", `bg-${color}`];
+
+const minimize = ref(false);
+
+const icon = computed(() => minimize.value ? "sym_o_add" : "sym_o_remove");
 </script>
 <template>
     <q-card v-bind="attrs">
-        <q-toolbar v-if="title">
-            <q-toolbar-title>{{ title }}</q-toolbar-title>
-        </q-toolbar>
-        <slot></slot>
+        <q-bar :class="cl" v-if="title">
+            <div>{{ title }}</div>
+            <q-space />
+            <q-btn dense flat :icon="icon" @click="minimize = !minimize" />
+        </q-bar>
+        <template v-if="!minimize">
+            <slot></slot>
+        </template>
+
 
         <q-inner-loading :showing="loading" label="Please wait..." label-class="text-primary" />
     </q-card>

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

@@ -1,12 +1,32 @@
 <script setup>
 const COLORS = [
-    'bg-primary',
-    'bg-secondary',
-    'bg-positive',
-    'bg-negative',
-    'bg-info',
-    'bg-warning',
-    'bg-dark'
+    'primary',
+    'secondary',
+    'positive',
+    'negative',
+    'info',
+    'warning',
+    'dark',
+    'red',
+    'pink',
+    'purple',
+    'deep-purple',
+    'indigo',
+    'blue',
+    'light-blue',
+    'cyan',
+    'teal',
+    'green',
+    'light-green',
+    'lime',
+    'yellow',
+    'amber',
+    'orange',
+    'deep-orange',
+    'brown',
+    'grey',
+    'blue-grey'
+
 ]
 
 defineEmits(['update:theme', 'update:menuOverlayHeader', 'update:dense', 'update:headerColor', 'update:miniState'])
@@ -62,7 +82,7 @@ const props = defineProps({
             <q-item-section>
                 <q-item-label>Header color</q-item-label>
                 <div class="row">
-                    <div v-for="c in COLORS" :key="c" :class="c" style="width: 1.5rem; height: 1.5rem;"
+                    <div v-for="c in COLORS" :key="c" :class="`bg-${c}`" style="width: 1.5rem; height: 1.5rem;"
                         class="q-ma-xs cursor-pointer rounded-borders" @click="$emit('update:headerColor', c)" />
                 </div>
             </q-item-section>

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { useQuasar, QTable } from 'quasar';
 import { ref, computed, onMounted, useSlots, reactive, useAttrs } from "vue";
-import { t, deleteObject, q, f, useLight } from '../';
+import { t, deleteObject, q, f, useLight, GQLFieldBuilder } from '../';
+import { toQuery } from '@hostlink/light'
 
 const errors = ref<InstanceType<any>>([]);
 
@@ -21,6 +22,7 @@ const props = defineProps({
             searchType?: string,
             searchOptions?: Array<any>,
             field?: string | Object,
+            gqlField?: string | Array<string> | Object,
         }>
     },
     actions: {
@@ -194,6 +196,15 @@ const getData = async (
     limit: number,
     fields: Array<string> = []) => {
 
+    const query: any = {};
+    query[operation] = {
+        meta: {
+            total: true,
+            key: true,
+            name: true
+        }
+    }
+
     let offset_limit: any = {}
     if (offset) {
         offset_limit.offset = offset;
@@ -203,6 +214,12 @@ const getData = async (
         offset_limit.limit = limit;
     }
 
+    if (offset_limit) {
+        query[operation].data = {
+            __args: offset_limit
+        };
+    }
+
     let params: any = {}
     if (sort) {
         params.sort = sort;
@@ -212,7 +229,13 @@ const getData = async (
         params.filters = filters
     }
 
-    return await q(operation, params, [f("data", offset_limit, fields), f("meta", ["total", "key", "name"])]);
+    query[operation].__args = params;
+
+    query[operation].data = query[operation].data || {};
+    Object.assign(query[operation].data, fields);
+
+    const resp = await q(query);
+    return resp[operation];
 
 }
 
@@ -226,41 +249,43 @@ const onRequest = async (p: any) => {
         },
         async loadData(operation: string, filters: any = null, fields: Array<any> = []) {
 
+
+            const builder = GQLFieldBuilder();
+
             //
-            let localFields: Array<any> = [];
 
             if (props.rowKey) {
-                localFields.push(props.rowKey);
+                builder.add(props.rowKey);
             }
 
             fields.forEach((f) => {
-                localFields.push(f);
+                builder.add(f);
             });
 
             props.columns?.forEach((col) => {
-                if (col.name.startsWith("_")) {
-                    return;
+                if (col.gqlField) {
+                    builder.add(col.gqlField);
                 }
-                if (localFields.includes(col.name)) {
+
+                if (col.name.startsWith("_")) {
                     return;
                 }
-                localFields.push(col.name);
+                builder.add(col.name);
+
             });
 
             if (actionView) {
-                localFields.push("canView");
+                builder.add("canView");
             }
 
             if (actionDelete) {
-                localFields.push("canDelete");
+                builder.add("canDelete");
             }
 
             if (activeEdit) {
-                localFields.push("canUpdate");
+                builder.add("canUpdate");
             }
 
-
-
             let localFilters = getFilterValue();
             //merge the filters
             if (filters) {
@@ -280,7 +305,7 @@ const onRequest = async (p: any) => {
             loading.value = true;
             const offset = (p.pagination.page - 1) * p.pagination.rowsPerPage;
             const limit = p.pagination.rowsPerPage;
-            const allData = await getData(operation, localFilters, sort, offset, limit, localFields);
+            const allData = await getData(operation, localFilters, sort, offset, limit, builder.get());
 
             rows.value = allData.data;
 
@@ -407,8 +432,7 @@ const filter = ref('');
 
     <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">
+        :rows-per-page-options="rowsPerPageOptions" :selection="selection" v-model:pagination="pagination" :filter="filter">
 
         <template #top-right="props" v-if="fullscreen || searchable">
             <q-input v-if="searchable" outlined dense debounce="300" v-model="filter" placeholder="Search">

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

@@ -1,6 +1,8 @@
 <script setup>
+import { useLight } from '../'
 import { useSlots, computed, ref } from 'vue';
 
+const light = useLight();
 const props = defineProps(["modelValue"])
 const emit = defineEmits(["update:modelValue"])
 const slots = useSlots();
@@ -30,11 +32,13 @@ const localValue = computed({
     }
 })
 
+const color = light.getStyle("color", 'primary');
+
 </script>
 
 <template>
     <l-card>
-        <q-tabs class="text-grey" active-color="primary" indicator-color="primary" align="justify" v-model="localValue">
+        <q-tabs class="text-grey" :active-color="color" :indicator-color="color" align="justify" v-model="localValue">
             <q-tab v-for="tab in tabContents" :label="$t(tab.label)" :name="tab.name"></q-tab>
         </q-tabs>
         <q-tab-panels v-model="localValue">

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

@@ -0,0 +1,5 @@
+export default function (): {
+    merge: (obj1: any, obj2: any) => any;
+    add: (f: any) => void;
+    get(): any;
+};

package/dist/runtime/lib/GQLFieldBuilder.mjs

@@ -0,0 +1,35 @@
+import { toQuery } from "@hostlink/light";
+export default function() {
+  const merge = (obj1, obj2) => {
+    for (let key in obj2) {
+      if (obj2.hasOwnProperty(key)) {
+        obj1[key] = obj1[key] && obj1[key].toString() === "[object Object]" ? merge(obj1[key], obj2[key]) : obj1[key] = obj2[key];
+      }
+    }
+    return obj1;
+  };
+  let fields = {};
+  return {
+    //deep merge
+    merge,
+    add: (f) => {
+      if (typeof f === "string") {
+        fields[f] = true;
+        return;
+      }
+      if (Array.isArray(f)) {
+        f.forEach((item) => {
+          fields[item] = true;
+        });
+        return;
+      }
+      if (typeof f === "object") {
+        fields = merge(fields, toQuery(f));
+        return;
+      }
+    },
+    get() {
+      return fields;
+    }
+  };
+}

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

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

package/dist/runtime/lib/index.mjs

@@ -16,6 +16,7 @@ import updateObject from "./updateObject.mjs";
 import listObject from "./listObject.mjs";
 import loadObject from "./loadObject.mjs";
 import isGranted from "./isGranted.mjs";
+import GQLFieldBuilder from "./GQLFieldBuilder.mjs";
 const notify = function(message, color = "green") {
   Notify.create({
     message,
@@ -47,5 +48,6 @@ export {
   listObject,
   isGranted,
   getApiBase,
-  loadObject
+  loadObject,
+  GQLFieldBuilder
 };

package/dist/runtime/lib/q.mjs

@@ -2,14 +2,14 @@ import axios from "axios";
 import f from "./f.mjs";
 import { jsonToGraphQLQuery } from "json-to-graphql-query";
 import { getApiBase } from "./index.mjs";
-import toJson from "./toJson.mjs";
+import { toQuery } from "@hostlink/light";
 export default async function(operation, args = null, fields = []) {
   const service = axios.create({
     withCredentials: true
   });
   let query;
   if (operation instanceof Object) {
-    query = jsonToGraphQLQuery(toJson(operation));
+    query = jsonToGraphQLQuery(toQuery(operation));
   } else {
     if (arguments.length === 2) {
       fields = args;

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

@@ -35,9 +35,6 @@ const columns = [
 
 <template>
     <l-page>
-        <l-table @request="$event.loadObjects('MailLog', null, ['body'])" :columns="columns" sort-by="maillog_id:desc">
-
-
-        </l-table>
+        <l-table @request="$event.loadObjects('MailLog')" :columns="columns" sort-by="maillog_id:desc" />
     </l-page>
 </template>

package/dist/runtime/pages/Permission/all.vue

@@ -1,9 +1,18 @@
 <script setup>
 import { reactive } from 'vue'
-import { q, m } from '../../'
-const app = await q("app", ["permissions"])
+import { m } from '../../'
 
-const roles = await q("listRole", ["name", "permissions"])
+import { query } from '@hostlink/light';
+
+const { app, listRole: roles } = await query({
+    app: {
+        permissions: true
+    },
+    listRole: {
+        name: true,
+        permissions: true
+    }
+})
 
 const columns = [{
     label: "Permission",
@@ -41,13 +50,6 @@ app.permissions.forEach(permission => {
 });
 
 const onUpdate = (value, role, permission) => {
-    /*    if (value) {
-           app.permissions.push(role);
-       } else {
-           app.permissions.splice(app.permissions.indexOf(role), 1);
-       }
-       app.save(); */
-
     if (value) {
         m("addPermission", { value: permission, role })
     } else {
@@ -60,8 +62,6 @@ const onUpdate = (value, role, permission) => {
             row[role] = value;
         }
     });
-
-
 }
 
 </script>

package/dist/runtime/pages/Permission/export.vue

@@ -1,15 +1,23 @@
 <script setup>
 import { reactive } from 'vue'
 import { utils, writeFileXLSX } from 'xlsx';
-import { q } from '../../'
+import { query } from '@hostlink/light';
 const obj = reactive({
     roles: []
 });
 
-const app = await q("app", ["permissions"])
-let allData = await q("listRole", ["name", "permissions"]);
+const { app, listRole } = await query({
+    app: {
+        permissions: true
+    },
+    listRole: {
+        name: true,
+        permissions: true
+    }
 
-let roles = allData.map((role) => {
+})
+
+let roles = listRole.map((role) => {
     return {
         label: role.name,
         value: role.name,
@@ -19,7 +27,7 @@ let roles = allData.map((role) => {
 const submit = () => {
 
     //filter roles
-    let e = allData.filter((role) => {
+    let e = listRole.filter((role) => {
         return obj.roles.indexOf(role.name) != -1;
     });
 

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

@@ -1,8 +1,4 @@
 <script setup>
-const onRequest = async (request) => {
-    request.loadObjects("Permission", null, ["permission_id"])
-};
-
 const columns = [
     {
         label: "Role",
@@ -21,6 +17,7 @@ const columns = [
 </script>
 <template>
     <l-page>
-        <l-table @request="onRequest" :columns="columns" :actions="['delete']"></l-table>
+        <l-table row-key="permission_id" @request="$event.loadObjects('Permission')" :columns="columns"
+            :actions="['delete']"></l-table>
     </l-page>
 </template>

package/dist/runtime/pages/System/database/backup.vue

@@ -1,5 +1,6 @@
 <template>
     <l-page>
+        comming soon
 
     </l-page>
 </template>

package/dist/runtime/pages/System/database/table.vue

@@ -1,6 +1,15 @@
 <script setup>
-import { q } from '../../../'
-const { system: { database } } = await q({ system: { database: ["table"] } })
+import { query } from '@hostlink/light';
+
+const { system: { database } } = await query({
+    system: {
+        database: {
+            table: true
+        }
+    }
+})
+
+
 </script>
 <template>
     <l-page>

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

@@ -49,8 +49,6 @@ const onSave = async () => {
 </script>
 <template>
     <l-page>
-
-        {{ test }}
         <l-form @save="onSave">
             <l-input label="Company" v-model="obj.company"></l-input>
             <l-input label="Company logo" v-model="obj.company_logo"></l-input>

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

@@ -1,11 +1,7 @@
 <script setup>
 import { ref } from 'vue'
 const onRequest = async (request) => {
-    //listData("User", params, ["canDelete", "canUpdate", "canRead", "user_id"]);
-
-    request.loadObjects("User", {
-        status: status.value
-    }, ["user_id"]);
+    request.loadObjects("User", { status: status.value });
 };
 
 const columns = [
@@ -52,13 +48,11 @@ const status = ref("0");
 
         <l-tabs v-model="status">
             <l-tab label="Active" name="0">
-                <l-table
-                
-                @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-tab label="Inactive" name="1">
-                <l-table @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/package.json

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