@hostlink/nuxt-light 1.1.8 → 1.3.0

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

@@ -194,16 +194,16 @@ onMounted(() => {
       <q-form ref="form1">
         <div class="q-gutter-sm">
           <l-input v-model.trim="data.username" label="Username" :rules="[v => !!v || $t('Username is required')]"
-            clearable :outlined="false" stackLabel/>
+            clearable :outlined="false" stackLabel autocomplete="username" />
           <l-input v-model="data.password" label="Password" type="password" clearable show-password stackLabel
-            :rules="[v => !!v || $t('Password is required')]" @keydown.enter.prevent="submit" :outlined="false" />
+            :rules="[v => !!v || $t('Password is required')]" @keydown.enter.prevent="submit" :outlined="false" autocomplete="current-password" />
           <l-input v-if="twoFactorAuthentication" v-model="data.code" label="2FA code" required type="text" clearable>
           </l-input>
         </div>
       </q-form>
     </q-card-section>
     <q-card-actions>
-      <l-btn label="Login" outline rounded color="primary" icon="sym_o_login" @click="submit" />
+      <l-btn label="Login" outline rounded color="primary" icon="sym_o_login" @click="submit"/>
       <l-btn v-if="hasBioLogin" outline rounded color="primary" icon="sym_o_fingerprint" @click="bioLogin" />
       <l-btn label="Forget password" outline rounded color="primary" icon="sym_o_lock_reset" @click="forgetPassword" />
     </q-card-actions>

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

@@ -3,7 +3,6 @@ import { ref } from 'vue'
 const props = defineProps(["value", "dense"])
 const menus = ref(null);
 
-
 const expansion = ref(null);
 
 const onShowChild = (menu) => {
@@ -28,7 +27,7 @@ defineExpose({
 </script>
 
 <style scoped>
-.menu-list .q-item{border-radius:24px 24px 24px 24px}.menu-list .q-router-link--exact-active{background:linear-gradient(118deg,var(--q-primary),rgba(115,103,240,.7));color:#fff}
+.menu-list .q-item{border-radius:12px 12px 12px 12px}.menu-list .q-router-link--exact-active{background:linear-gradient(118deg,var(--q-primary),rgba(115,103,240,.7));color:#fff}
 </style>
 <template>
     <q-expansion-item v-if="value.children?.length > 0" :label="$t(value.label)" :icon="value.icon" :dense="dense"
@@ -39,7 +38,9 @@ defineExpose({
         </q-list>
     </q-expansion-item>
     <q-list v-else class="menu-list" :dense="dense">
-        <q-item v-ripple :to="value.to">
+        <q-separator v-if="value.type == 'separator'" :spaced="value.spaced" />
+        <q-item-label header v-if="value.type=='header'">{{ value.label }}</q-item-label>
+        <q-item v-ripple :to="value.to" v-if="!value.type" >
             <q-item-section avatar>
                 <q-icon :name="value.icon" />
             </q-item-section>

package/dist/runtime/components/l-small-box.vue

@@ -2,10 +2,10 @@
 import { computed } from "vue"
 
 export interface LSmallBoxProps {
-    title: string;
-    subtitle: string;
-    icon: string;
-    color: 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' | 'brown' | 'grey' | 'blue-grey'
+    title?: string;
+    subtitle?: string;
+    icon?: string;
+    color?: 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' | 'brown' | 'grey' | 'blue-grey'
 }
 
 const props = withDefaults(defineProps<LSmallBoxProps>(), {

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

@@ -37,13 +37,15 @@ const localValue = computed({
     }
 })
 
-const color = light.getStyle("color");
+
 
 </script>
 
 <template>
     <l-card>
-        <q-tabs class="text-grey" :active-color="color" :indicator-color="color" align="justify" v-model="localValue">
+        
+        <q-tabs class="text-grey" :active-color="$light.color" :indicator-color="$light.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/components/l-user-eventlog.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { model, q } from "#imports";
+const props = defineProps(['id']);
+</script>
+<template>
+    <div>
+        <l-table row-key="eventlog_id" sort-by="eventlog_id:desc"
+            :columns="model('EventLog').columns(['eventlog_id', 'class', 'id', 'action', 'created_time'])" @request="async (req) => {
+                const a = {
+                    listUser: {
+                        __args: {
+                            filters: {
+                                user_id: props.id
+                            }
+                        },
+                        data: {
+                            __args: {
+                                limit: 1
+                            },
+                            eventLog: req.gql
+                        }
+                    }
+                }
+
+                let resp = await q(a);
+                req.setData(resp.listUser.data[0].eventLog)
+            }" />
+    </div>
+</template>

package/dist/runtime/components/l-user-overview.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+
+import { model } from "#imports";
+const props = defineProps(['id']);
+
+const obj = await model('User').get({ user_id: props.id }, ["user_id", "username", "first_name", "last_name", "email", "phone", "roles", 'status', 'join_date'])
+
+</script>
+<template>
+    <l-card class="q-mb-md">
+        <q-card-section>
+            <l-row>
+                <l-col md="5">
+                    <q-list dense separator>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label>{{ $t('Username') }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>{{ obj.username }}</q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label>{{ $t('First name') }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>{{ obj.first_name }}</q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label>{{ $t('Last name') }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>{{ obj.last_name }}</q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label>{{ $t('Email') }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>{{ obj.email }}</q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label>{{ $t('Phone') }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>{{ obj.phone }}</q-item-section>
+                        </q-item>
+
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label>{{ $t('Roles') }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>
+                                <div class="q-gutter-xs float-left">
+                                    <q-badge v-for="role in obj.roles" :key="role">{{ role }}</q-badge>
+                                </div>
+                            </q-item-section>
+                        </q-item>
+
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label>{{ $t('Status') }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>{{ model('User').columns(["status"])[0].format(obj.status) }}</q-item-section>
+                        </q-item>
+
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label>{{ $t('Join date') }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>{{ obj.join_date }}</q-item-section>
+                        </q-item>
+                    </q-list>
+
+
+                </l-col>
+            </l-row>
+
+        </q-card-section>
+
+    </l-card>
+</template>

package/dist/runtime/components/l-user-userlog.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { model, q } from "#imports";
+const props = defineProps(['id']);
+
+const columns = model('UserLog').columns(["userlog_id", "login_dt", "last_access_time", "logout_dt", "result", "user_agent"]);
+</script>
+<template>
+    <div>
+        <l-table row-key="userlog_id" sort-by="userlog_id:desc" :columns="columns" @request="async (req) => {
+            req.loadObjects('UserLog', { filters: { user_id: props.id } })
+        }" />
+    </div>
+</template>

package/dist/runtime/formkit/Select.vue

@@ -14,7 +14,7 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-console.log(props.context.node.props.parsedRules);
+//console.log(props.context.node.props.parsedRules);
 
 //check required in parsedRules
 let required = false;

package/dist/runtime/index.d.ts

@@ -1,8 +1,51 @@
+declare const app: {
+    company: string;
+    companyLogo: string;
+    color: string;
+    theme: string;
+    isAdmin: boolean;
+    permissions: string[];
+    myFavorites: any[];
+    setMyFavorites: (favorites: any[]) => void;
+    reloadMyFavorites: () => Promise<void>;
+    getMyFavorites: () => any[];
+    isDarkMode: () => boolean;
+    setCompany: (company: string) => void;
+    getCompany: () => string;
+    setCompanyLogo: (logo: string) => void;
+    getCompanyLogo: () => string;
+    getVersion: () => any;
+    addError: (error: String) => void;
+    getErrors: () => String[];
+    removeError: (error: String) => void;
+    getStyle: (name: String) => any;
+    setStyles: (s: Object) => void;
+    getStyles: () => {
+        [key: string]: any;
+    };
+    setStyle: (name: String, value: any) => Promise<void>;
+    setCurrentRoute: (to: any, from: any) => void;
+    getID: () => number | null;
+    init: (styles: any) => void;
+    isGranted: (right?: string | undefined) => boolean;
+    setPermissions: (permissions: string[]) => void;
+};
+declare module 'vue' {
+    interface ComponentCustomProperties {
+        $light: typeof app;
+    }
+}
 export declare const useLight: () => {
     company: string;
     companyLogo: string;
     color: string;
     theme: string;
+    isAdmin: boolean;
+    permissions: string[];
+    myFavorites: any[];
+    setMyFavorites: (favorites: Array<any>) => void;
+    reloadMyFavorites: () => Promise<void>;
+    getMyFavorites: () => any[];
     isDarkMode: () => boolean;
     setCompany: (company: string) => void;
     getCompany: () => string;
@@ -15,12 +58,13 @@ export declare const useLight: () => {
     getStyle: (name: String) => any;
     setStyles: (s: Object) => void;
     getStyles: () => {
-        theme?: String | undefined;
-        color?: String | undefined;
+        [key: string]: any;
     };
     setStyle: (name: String, value: any) => Promise<void>;
     setCurrentRoute: (to: any, from: any) => void;
     getID: () => number | null;
     init: (styles: any) => void;
+    isGranted: (right?: string) => boolean;
+    setPermissions: (permissions: Array<string>) => void;
 };
 export * from "./lib";

package/dist/runtime/index.mjs

@@ -1,6 +1,6 @@
 import packageJson from "../../package.json";
 import { watch, reactive } from "vue";
-import { m } from "./lib/index.mjs";
+import { m, q } from "./lib/index.mjs";
 const errors = [];
 let styles = {};
 let defaultStyle = {
@@ -15,6 +15,28 @@ const app = reactive({
   companyLogo: "",
   color: "primary",
   theme: "light",
+  isAdmin: false,
+  permissions: Array(),
+  myFavorites: Array(),
+  setMyFavorites: (favorites) => {
+    app.myFavorites = favorites;
+  },
+  reloadMyFavorites: async () => {
+    const data = await q({
+      my: {
+        myFavorites: {
+          my_favorite_id: true,
+          label: true,
+          path: true,
+          icon: true
+        }
+      }
+    });
+    app.myFavorites = data.my.myFavorites;
+  },
+  getMyFavorites: () => {
+    return app.myFavorites;
+  },
   isDarkMode: () => {
     return app.theme == "dark";
   },
@@ -90,6 +112,18 @@ const app = reactive({
     watch(() => app.theme, async () => {
       await app.setStyle("theme", app.theme);
     });
+  },
+  isGranted(right) {
+    if (right === void 0)
+      return true;
+    if (app.isAdmin)
+      return true;
+    if (app.permissions.includes(right))
+      return true;
+    return false;
+  },
+  setPermissions(permissions) {
+    this.permissions = permissions;
   }
 });
 let currentRoute = null;

package/dist/runtime/locales/zh-hk.json

@@ -1,4 +1,7 @@
 {
+    "Developer": "開發者",
+    "Modules": "模組",
+    "Security": "安全",
     "Password policy": "密碼規則",
     "Must contain at least {0} characters": "必須包含至少{0}個字元",
     "contains_symbol": "必須包含符號",

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

@@ -1,12 +1,25 @@
 <script setup>
 import { ref, computed, inject } from 'vue';
-import { m, q } from '../../../'
+import { m, q } from '#imports'
 import { useQuasar } from 'quasar';
 
 const quasar = useQuasar();
-const menus = ref(await q("appMenus", []));
+const appMenus = await q("appMenus", [])
+
+
+const menus = ref([
+    {
+        label: "[Root]",
+        uuid: "ROOT",
+        children: appMenus.map(m => {
+            m.parent = 'ROOT'
+            return m
+        }),
+        type: 'root'
+    }
+]);
 
-const selected = ref(null);
+const selected = ref('ROOT');
 const tree1 = ref(null)
 
 const getUUID = () => {
@@ -20,30 +33,9 @@ const getUUID = () => {
 }
 
 const onReload = async () => {
-    menus.value = await q("appMenus", []);
+    menus.value[0].children = await q("appMenus", []);
 }
 
-const onAdd = () => {
-
-    quasar.dialog({
-        title: 'Add Menu',
-        message: 'Enter menu label',
-        prompt: {
-            model: '',
-        },
-        cancel: true,
-        persistent: true,
-    }).onOk((data) => {
-        if (data === '') return;
-
-        menus.value.push({
-            label: data,
-            uuid: getUUID(),
-            children: [],
-        });
-
-    });
-}
 const onAddChild = (node) => {
 
     quasar.dialog({
@@ -81,9 +73,10 @@ const onRemove = (node) => {
     }
 }
 
-const splitterModel = ref(38)
+const splitterModel = ref(20)
 
 const selectedNode = computed(() => {
+    if (selected.value == 'ROOT') return menus.value[0];
     return tree1.value.getNodeByKey(selected.value);
 });
 const reloadMenu = inject('reloadMenu')
@@ -98,7 +91,7 @@ const onSave = () => {
         persistent: true,
     }).onOk(async () => {
         if (await m("updateAppMenus", {
-            data: menus.value
+            data: menus.value[0].children
         })) {
             quasar.notify({
                 message: 'Menu saved',
@@ -140,20 +133,6 @@ const onMoveConfirm = () => {
     showMove.value = false;
 
 }
-const onMoveToRoot = () => {
-    const selectedNode = tree1.value.getNodeByKey(selected.value);
-
-    //clone selected node
-    const newNode = JSON.parse(JSON.stringify(selectedNode));
-    newNode.parent = null;
-    onRemove(selectedNode);
-
-    //add to target
-
-    menus.value.push(newNode);
-
-    showMove.value = false;
-}
 
 const getParentNode = (node) => {
     if (!node.parent) return {
@@ -197,6 +176,34 @@ const onAddChildMenu = (node, type) => {
         children: [],
     });
 }
+
+const onAddSeparator = (node) => {
+    node.children.push({
+        label: '[Separator]',
+        uuid: getUUID(),
+        parent: node.uuid,
+        children: [],
+        type: 'separator',
+        spaced: true,
+    });
+
+
+}
+
+const onAddHeader = (node) => {
+    node.children.push({
+        label: '[Header]',
+        uuid: getUUID(),
+        parent: node.uuid,
+        children: [],
+        type: 'header',
+    });
+}
+
+
+const menusOnly = computed(() => {
+    return menus.value.filter((item) => !item.type);
+});
 </script>
 
 <template>
@@ -211,79 +218,109 @@ const onAddChildMenu = (node, type) => {
                 <q-card-actions align="right">
                     <q-btn flat label="Cancel" color="primary" v-close-popup />
                     <q-btn flat label="Move" color="primary" @click="onMoveConfirm" />
-                    <q-btn flat label="Move to root" color="primary" @click="onMoveToRoot" />
+                    <!-- q-btn flat label="Move to root" color="primary" @click="onMoveToRoot" /-->
                 </q-card-actions>
             </l-card>
         </q-dialog>
 
         <l-card>
+            <q-card-actions  v-if="selectedNode">
+                <l-btn @click="onSave" label="Save" icon="sym_o_save" />
+                <l-btn @click="onReload" label="Reload" icon="sym_o_refresh" />
+                <template v-if="selectedNode.type == 'root'">
+                    <l-btn color="primary" @click="onAddChild(selectedNode)" label="Add" icon="sym_o_add" />
+                    <l-btn color="primary" @click="onAddHeader(selectedNode)" label="Add Header" icon="sym_o_add" />
+                    <l-btn color="primary" @click="onAddSeparator(selectedNode)" label="Add Separator" icon="sym_o_add" />
+                </template>
+
+                <template v-else>
+                    <q-btn-dropdown color="primary" label="Add" icon="sym_o_add">
+                        <q-list>
+                            <q-item clickable v-close-popup @click="onAddChild(selectedNode)">
+                                <q-item-section>
+                                    <q-item-label>Child</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item clickable v-close-popup @click="onAddHeader(selectedNode)">
+                                <q-item-section>
+                                    <q-item-label>Header</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item clickable v-close-popup @click="onAddSeparator(selectedNode)">
+                                <q-item-section>
+                                    <q-item-label>Separator</q-item-label>
+                                </q-item-section>
+                            </q-item>
+
+                        </q-list>
+                    </q-btn-dropdown>
+
+                    <l-btn color="primary" @click="onRemove(selectedNode)" label="Remove" icon="sym_o_remove" />
+
+
+                    <l-btn color="primary" @click="onMove(selectedNode)" label="Move" icon="sym_o_move" />
+
+                    <l-btn color="primary" @click="onMoveUp(selectedNode)" label="Up" icon="sym_o_arrow_upward" />
+
+                    <l-btn color="primary" @click="onMoveDown(selectedNode)" label="Down" icon="sym_o_arrow_downward" />
+
+
+                    <q-btn-dropdown color="primary" label="Add menus" icon="sym_o_add">
+                        <q-list>
+                            <q-item clickable v-close-popup @click="onAddChildMenu(selectedNode, 'list')">
+                                <q-item-section>
+                                    <q-item-label>List</q-item-label>
+                                </q-item-section>
+                            </q-item>
+
+                            <q-item clickable v-close-popup @click="onAddChildMenu(selectedNode, 'add')">
+                                <q-item-section>
+                                    <q-item-label>Add</q-item-label>
+                                </q-item-section>
+                            </q-item>
+
+                        </q-list>
+                    </q-btn-dropdown>
+                </template>
+            </q-card-actions>
             <q-splitter v-model="splitterModel" style="height:680px">
                 <template #before>
-                    <q-card-actions>
-                        <l-btn @click="onAdd" label="Add" icon="sym_o_add" />
-                        <l-btn @click="onReload" label="Reload" icon="sym_o_refresh" />
-
-                        <l-btn @click="onSave" label="Save" icon="sym_o_save" />
-                    </q-card-actions>
 
                     <q-tree :nodes="menus" selected-color="primary" default-expand-all v-model:selected="selected"
                         node-key="uuid" ref="tree1" />
                 </template>
 
                 <template #after v-if="selected">
-
-                    <q-card-actions>
-                        <l-btn outline rounded color="primary" @click="onRemove(selectedNode)" label="Remove"
-                            icon="sym_o_remove" />
-
-                        <l-btn outline rounded color="primary" @click="onAddChild(selectedNode)" label="Add Child"
-                            icon="sym_o_add" />
-
-                        <l-btn outline rounded color="primary" @click="onMove(selectedNode)" label="Move"
-                            icon="sym_o_move" />
-
-                        <l-btn outline rounded color="primary" @click="onMoveUp(selectedNode)" label="Up"
-                            icon="sym_o_arrow_upward" />
-
-                        <l-btn outline rounded color="primary" @click="onMoveDown(selectedNode)" label="Down"
-                            icon="sym_o_arrow_downward" />
-
-
-                        <q-btn-dropdown color="primary" label="Add menus" outline rounded icon="sym_o_add">
-                            <q-list>
-                                <q-item clickable v-close-popup @click="onAddChildMenu(selectedNode, 'list')">
-                                    <q-item-section>
-                                        <q-item-label>List</q-item-label>
-                                    </q-item-section>
-                                </q-item>
-
-                                <q-item clickable v-close-popup @click="onAddChildMenu(selectedNode, 'add')">
-                                    <q-item-section>
-                                        <q-item-label>Add</q-item-label>
-                                    </q-item-section>
-                                </q-item>
-
-                            </q-list>
-                        </q-btn-dropdown>
-
-
-                    </q-card-actions>
-
-
                     <q-card-section>
-                        <div class="q-gutter-md">
-                            <l-input label="Label" v-model="selectedNode.label" />
-                            <l-input label="To" v-model="selectedNode.to" />
-                            <l-input label="Icon" v-model="selectedNode.icon" hint="example: sym_o_add" />
-                            <l-input label="Permission" v-model="selectedNode.permission" />
-                            <l-input label="UUID" v-model="selectedNode.uuid" readonly />
-                        </div>
-
-                        <div>
-                            <a href="https://fonts.google.com/icons" target="_blank">Material Icons</a>
-                        </div>
-
+                        <template v-if="!selectedNode.type">
+                            <div class="q-gutter-md">
+                                <l-input label="Label" v-model="selectedNode.label" />
+                                <l-input label="To" v-model="selectedNode.to" />
+                                <l-input label="Icon" v-model="selectedNode.icon" hint="example: sym_o_add" />
+                                <l-input label="Permission" v-model="selectedNode.permission" />
+                                <l-input label="UUID" v-model="selectedNode.uuid" readonly />
+                            </div>
+
+                            <div>
+                                <a href="https://fonts.google.com/icons" target="_blank">Material Icons</a>
+                            </div>
+
+                        </template>
+
+                        <template v-if="selectedNode.type == 'separator'">
+                            <div class="q-gutter-md">
+                                <q-checkbox label="Spaced" v-model="selectedNode.spaced" />
+
+                            </div>
+                        </template>
+
+                        <template v-if="selectedNode.type == 'header'">
+                            <div class="q-gutter-md">
+                                <l-input label="Label" v-model="selectedNode.label" />
+                            </div>
+                        </template>
                     </q-card-section>
+
                 </template>
 
             </q-splitter>