@hostlink/nuxt-light 1.18.1 → 1.18.3

package/dist/runtime/light.js

@@ -0,0 +1,242 @@
+import { useQuasar } from "quasar";
+import packageJson from "../../package.json";
+import { watch, reactive } from "vue";
+import { m, q } from "./lib/index.js";
+const COLOR_CODE = {
+  red: "#f44336",
+  pink: "#e91e63",
+  purple: "#9c27b0",
+  "deep-purple": "#673ab7",
+  indigo: "#3f51b5",
+  blue: "#2196f3",
+  "light-blue": "#03a9f4",
+  cyan: "#00bcd4",
+  teal: "#009688",
+  green: "#4caf50",
+  "light-green": "#8bc34a",
+  lime: "#cddc39",
+  yellow: "#ffeb3b",
+  amber: "#ffc107",
+  orange: "#ff9800",
+  "deep-orange": "#ff5722",
+  brown: "#795548",
+  grey: "#9e9e9e",
+  "blue-grey": "#607d8b",
+  primary: "#7367f0",
+  secondary: "#82868b",
+  accent: "#9C27B0",
+  positive: "#28c76f",
+  negative: "#ea5455",
+  info: "#00cfe8",
+  warning: "#ff9f43",
+  dark: "#4b4b4b"
+};
+let styles = {};
+let defaultStyle = {
+  inputOutlined: true,
+  inputStackLabel: true,
+  tableFlat: true,
+  tableBorder: true,
+  tableSeparator: "cell"
+};
+const light = reactive({
+  version: packageJson.version,
+  errors: [],
+  $q: null,
+  $i18n: null,
+  company: "",
+  companyLogo: "",
+  color: "primary",
+  theme: "light",
+  isAdmin: false,
+  permissions: Array(),
+  myFavorites: Array(),
+  $t: null,
+  notify: (opts) => {
+    if (light.$q == null) {
+      throw new Error("Quasar is not initialized");
+    }
+    if (typeof opts === "string") {
+      opts = { message: opts };
+    }
+    if (opts.message !== void 0) {
+      opts.message = light.$t(opts.message);
+    }
+    if (opts.caption !== void 0) {
+      opts.caption = light.$t(opts.caption);
+    }
+    return light.$q.notify(opts);
+  },
+  dialog: (opts) => {
+    if (light.$q == null) {
+      throw new Error("Quasar is not initialized");
+    }
+    if (opts.title !== void 0) {
+      opts.title = light.$t(opts.title);
+    }
+    if (opts.message !== void 0) {
+      opts.message = light.$t(opts.message);
+    }
+    if (opts.cancel === true) {
+      opts.cancel = "Cancel";
+    }
+    if (typeof opts.cancel === "string") {
+      opts.cancel = light.$t(opts.cancel);
+    }
+    if (opts.ok === true) {
+      opts.ok = "OK";
+    }
+    if (typeof opts.ok === "string") {
+      opts.ok = light.$t(opts.ok);
+    }
+    return light.$q.dialog(opts);
+  },
+  users: {
+    create: async (user) => {
+      const u = await m("addUser", { data: user });
+      user.user_id = u;
+      return user;
+    },
+    del: async (user_id) => {
+      return await m("deleteUser", { id: user_id });
+    },
+    update: async (id, user) => {
+      return await m("updateUser", {
+        id,
+        data: user
+      });
+    },
+    list: async (args) => {
+      const { listUser } = await q({
+        listUser: {
+          data: {
+            __args: args,
+            user_id: true,
+            name: true
+          }
+        }
+      });
+      return listUser.data;
+    }
+  },
+  roles: {
+    list: async () => {
+      const { listRole } = await q({
+        listRole: {
+          name: true
+        }
+      });
+      return listRole;
+    }
+  },
+  getColorValue: () => {
+    return COLOR_CODE[light.color];
+  },
+  setMyFavorites: (favorites) => {
+    light.myFavorites = favorites;
+  },
+  reloadMyFavorites: async () => {
+    const data = await q({
+      my: {
+        myFavorites: {
+          my_favorite_id: true,
+          label: true,
+          path: true,
+          icon: true
+        }
+      }
+    });
+    light.myFavorites = data.my.myFavorites;
+  },
+  getMyFavorites: () => {
+    return light.myFavorites;
+  },
+  isDarkMode: () => {
+    return light.theme == "dark";
+  },
+  addError: (err) => {
+    light.errors.push(err);
+  },
+  removeError: (error) => {
+    const index = light.errors.indexOf(error);
+    if (index > -1) {
+      light.errors.splice(index, 1);
+    }
+  },
+  getStyle(name) {
+    if (styles[name] === void 0) {
+      if (defaultStyle[name] !== void 0) {
+        return defaultStyle[name];
+      }
+      return false;
+    }
+    return styles[name];
+  },
+  setStyles(s) {
+    styles = s;
+  },
+  getStyles() {
+    return styles;
+  },
+  async setStyle(name, value) {
+    await m("updateMyStyle", {
+      name,
+      value
+    });
+    styles[name] = value;
+  },
+  setCurrentRoute(to) {
+    currentRoute = to;
+  },
+  getID() {
+    if (currentRoute == null) return null;
+    let name = currentRoute.name?.toString();
+    if (name == void 0) return 0;
+    let parts = name.split("-");
+    const keyname = parts[1];
+    return parseInt(currentRoute.params[keyname]);
+  },
+  init(styles2) {
+    light.color = styles2.color || "primary";
+    light.theme = styles2.theme || "semi-dark";
+    light.setStyles(styles2);
+    watch(() => light.theme, async () => {
+      await light.setStyle("theme", light.theme);
+    });
+  },
+  isGranted(right) {
+    if (right === void 0) return true;
+    if (light.permissions.includes("*")) return true;
+    if (light.permissions.includes(right)) return true;
+    const parts = right.split(".");
+    parts.pop();
+    do {
+      if (light.permissions.includes(parts.join(".") + ".*")) return true;
+      parts.pop();
+    } while (parts.length > 0);
+    return false;
+  },
+  setPermissions(permissions) {
+    this.permissions = permissions;
+  }
+});
+export const createLight = (opts) => {
+  return {
+    install: (app) => {
+      app.config.globalProperties.$light = light;
+      light.$i18n = opts.i18n;
+      light.$t = opts.i18n.global.t;
+    }
+  };
+};
+let currentRoute = null;
+watch(() => light.color, async () => {
+  await m("updateMyStyle", {
+    name: "color",
+    value: light.color
+  });
+});
+export const useLight = () => {
+  light.$q = useQuasar();
+  return light;
+};

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

@@ -182,5 +182,33 @@
     "Invalid email format": "電郵格式錯誤",
     "No data available": "沒有資料",
     "Loading...": "載入中...",
-    "input_min": "最少{0}個字"
+    "input_min": "最少{0}個字",
+    "OK": "確定",
+    "Cancel": "取消",
+    "Please enter your username and email address, we will send you a code to reset your password": "請輸入您的使用者名稱和電子郵件地址，我們將向您發送一個代碼以重置密碼",
+    "Email is required": "電郵為必填",
+    "Enter your code": "輸入您的代碼",
+    "Please enter your two factor authentication code (If you lost your authenticator, please contact your administrator)": "請輸入您的雙重認證代碼（如果您丟失了您的驗證器，請聯繫您的管理員）",
+    "Please enter your new password": "請輸入您的新密碼",
+    "Your password has been reset successfully": "您的密碼已成功重置",
+    "Please enter the code sent to your email, your code will expire in 10 minutes": "請輸入發送到您的電子郵件的代碼，您的代碼將在10分鐘內過期",
+    "Your code is invalid or expired": "您的代碼無效或已過期",
+    "Mail": "郵件",
+    "Company": "公司",
+    "Company logo": "公司標誌",
+    "Copyright name": "版權名稱",
+    "Copyright year": "版權年份",
+    "Now download the app and scan the qrcode. Input the code to the following input and submit": "現在下載應用程序並掃描二維碼。將代碼輸入到以下輸入框中並提交",
+    "Please scan the QR code with your authenticator app, and enter the code generated": "請使用您的驗證器應用程序掃描QR代碼，然後輸入生成的代碼",
+    "You have already linked your Google account.": "您已經連接了您的Google帳戶。",
+    "Are you sure you want to unlink your Google account?": "您確定要取消連接您的Google帳戶嗎？",
+    "Yes": "是",
+    "No": "否",
+    "Add to favorite": "添加到收藏夾",
+    "Enter favorite label": "輸入收藏標籤",
+    "Reset 2FA": "重置雙重認證",
+    "Are you sure you want to reset 2FA?" : "您確定要重置雙重認證嗎？",
+    "Update role": "更新角色",
+    "Overview": "概覽",
+    "Click the button below to link your Google account.": "點擊下面的按鈕連接您的Google帳戶。"
 }

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

@@ -1,9 +1,7 @@
 <script setup>
-import { api, m } from '#imports';
-import { useQuasar } from 'quasar';
+import { api, m, useLight } from '#imports';
 import { resolveComponent, ref, reactive } from 'vue';
-
-const $q = useQuasar();
+const light = useLight();
 
 const { system: { database } } = await api.query({
     system: {
@@ -33,7 +31,7 @@ const refresh = async () => {
 
 const field_add = resolveComponent('l-dialog-database-field-add');
 const add = async (table) => {
-    $q.dialog({
+    light.dialog({
         component: field_add
     }).onOk(async (data) => {
         //data.name
@@ -48,7 +46,7 @@ const add = async (table) => {
                 nullable: data.nullable,
                 autoincrement: data.autoincrement
             })
-            $q.notify({
+            light.notify({
                 type: 'positive',
                 message: addDatabaseField
             })
@@ -56,7 +54,7 @@ const add = async (table) => {
             refresh();
 
         } catch (e) {
-            $q.notify({
+            light.notify({
                 type: 'negative',
                 message: e.message
             })
@@ -75,7 +73,7 @@ for (let table of database.table) {
 const removeField = async (table) => {
     //confirmation
 
-    $q.dialog({
+    light.dialog({
         title: 'Remove field',
         message: 'Are you sure you want to remove the selected fields?',
         ok: 'Yes',
@@ -92,7 +90,7 @@ const removeField = async (table) => {
                 table,
                 fields: fields
             })
-            $q.notify({
+            lgiht.notify({
                 type: 'positive',
                 message: removeDatabaseFields
             })
@@ -101,7 +99,7 @@ const removeField = async (table) => {
 
             refresh();
         } catch (e) {
-            $q.notify({
+            light.notify({
                 type: 'negative',
                 message: e.message
             })

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

@@ -23,7 +23,7 @@ const tab = ref('general')
                         <q-tab name="security" icon="sym_o_security" :label="$t('Security')" />
                         <q-tab name="Modules" icon="sym_o_apps" :label="$t('Modules')" />
                         <q-tab name="mail" icon="sym_o_email" :label="$t('Mail')" />
-                        <q-tab name="forget-password" icon="sym_o_lock" :label="$t('Forget Password')" />
+                        <q-tab name="forget-password" icon="sym_o_lock" :label="$t('Forget password')" />
                         <q-tab name="developer" icon="sym_o_code" :label="$t('Developer')" />
                     </q-tabs>
                 </template>

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

@@ -1,9 +1,9 @@
 <script setup>
-import { list, m } from '#imports'
+import { list, m, useLight } from '#imports'
 import { useRouter } from "vue-router"
 import { ref, computed } from "vue"
 import { useQuasar } from 'quasar'
-const $q = useQuasar()
+const light = useLight();
 
 let { data: users } = await list("User", null, ["user_id", "username", "name", "roles", "email"]);
 
@@ -44,7 +44,7 @@ const onCickView = async (id) => {
             window.location.reload();
         }
     } catch (e) {
-        $q.dialog({
+        light.dialog({
             title: "Error",
             message: e.message,
             color: "negative",

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

@@ -2,22 +2,16 @@
 import { useLight, getObject, m } from "#imports";
 import { useRoute } from "vue-router"
 import { ref } from 'vue';
-import { useQuasar } from 'quasar';
 
-const $q = useQuasar();
 const route = useRoute();
-
 const obj = await getObject(["canUpdate"]);
-
 const light = useLight();
-
 const tab = ref('overview');
 const id = route.params.user_id;
 
 const reset2fa = async () => {
-
     //confirm
-    await $q.dialog({
+    await light.dialog({
         title: "Reset 2FA",
         message: "Are you sure you want to reset 2FA?",
         color: "negative",
@@ -26,27 +20,19 @@ const reset2fa = async () => {
     }).onOk(async () => {
         try {
             await m('reset2FA', { id: parseInt(id) });
-            $q.notify({
+            light.notify({
                 type: 'positive',
                 message: '2FA reset successfully'
             });
         } catch (e) {
-            $q.notify({
+            light.notify({
                 type: 'negative',
                 message: e.message
             });
         }
-
     })
-
-
-
-
-
 }
-
 </script>
-
 <template>
     <l-page :edit-btn="obj.canUpdate">
 
@@ -59,10 +45,10 @@ const reset2fa = async () => {
 
         <q-card flat bordered>
             <q-tabs v-model="tab" :active-color="$light.color" inline-label align="justify">
-                <q-tab name="overview" icon="sym_o_person" label="Overview" />
-                <q-tab name="userlog" icon="sym_o_description" label="User log"
+                <q-tab name="overview" icon="sym_o_person" :label="$t('Overview')" />
+                <q-tab name="userlog" icon="sym_o_description" :label="$t('User log')"
                     v-if="$light.isGranted('userlog.list')" />
-                <q-tab name="eventlog" icon="sym_o_description" label="Event log"
+                <q-tab name="eventlog" icon="sym_o_description" :label="$t('Event log')"
                     v-if="$light.isGranted('eventlog.list')" />
             </q-tabs>
 

package/dist/runtime/pages/User/setting/bio-auth.vue

@@ -1,20 +1,44 @@
 <script setup>
 import { useQuasar } from "quasar";
-import { ref } from "vue"
+import { ref, reactive } from "vue"
+import { refreshNuxtData } from "#imports";
 import { q, m, getCurrentUser, api } from '#imports'
-const app = await q("app", ["hasBioAuth"]);
+const { app, listWebAuthn: data } = reactive(await q({
+    app: {
+        hasBioAuth: true
+    },
+    listWebAuthn: {
+        uuid: true,
+        ip: true,
+        user_agent: true,
+        createdTime: true
+    }
+}));
 
 
 const quasar = useQuasar();
 
-const data = ref(await q("listWebAuthn", ["uuid", "ip", "user_agent", "createdTime"]));
-
 const register = async () => {
     try {
         await api.auth.WebAuthn.register();
-        data.value = await q("listWebAuthn", ["uuid", "ip", "user_agent", "createdTime"]);
         const user = await getCurrentUser();
         localStorage.setItem("username", user.username);
+
+        //refresh data
+        const { listWebAuthn: d } = await q({
+            listWebAuthn: {
+                uuid: true,
+                ip: true,
+                user_agent: true,
+                createdTime: true
+            }
+        });
+
+        //clear data
+        data.splice(0, data.length);
+
+        data.push(...d);
+
     } catch (e) {
         quasar.dialog({
             title: "Error",
@@ -58,10 +82,9 @@ const deleteItem = async (uuid) => {
         cancel: "No",
     }).onOk(async () => {
         await m("deleteWebAuthn", { uuid });
-        data.value = await q("listWebAuthn", ["uuid", "ip", "user_agent", "createdTime"]);
+        //remove from data
+        data.splice(data.findIndex(item => item.uuid === uuid), 1);
     })
-
-
 }
 
 </script>
@@ -72,9 +95,10 @@ const deleteItem = async (uuid) => {
         </q-card-section>
 
         <template v-else>
-            <q-card-section>
+            <q-toolbar>
+                <q-toolbar-title>Biometric authentication</q-toolbar-title>
                 <l-btn label="Register" @click="register" icon="sym_o_add"></l-btn>
-            </q-card-section>
+            </q-toolbar>
 
             <q-table :rows="data" :columns="columns" dense :rows-per-page-options="[0]">
                 <template #body-cell-action="props">
@@ -82,14 +106,9 @@ const deleteItem = async (uuid) => {
                         <q-btn @click="deleteItem(props.row.uuid)" icon="sym_o_delete" round flat dense></q-btn>
                     </q-td>
                 </template>
-
-
             </q-table>
 
         </template>
 
-
-
-
     </l-card>
 </template>

package/dist/runtime/pages/User/setting/my_favorite.vue

@@ -3,7 +3,7 @@ import { useLight, model, q } from "#imports"
 import { ref } from "vue"
 import { useQuasar } from "quasar";
 const light = useLight()
-const quasar = useQuasar()
+const $q = useQuasar()
 
 const columns = [
     { name: "_delete", align: "center" },
@@ -17,15 +17,12 @@ const onSave = async (id, data) => {
     await model("MyFavorite").update(id, data);
 
     //show success message
-    quasar.notify({
+    $q.notify({
         message: "Updated successfully",
         color: "positive",
         icon: "check"
     });
-
-
     await light.reloadMyFavorites()
-
 }
 
 const onRemove = async (id) => {

package/dist/runtime/pages/User/setting/open_id.vue

@@ -1,10 +1,15 @@
 <script setup>
 import { reactive, onMounted, nextTick } from "vue"
 import { useQuasar } from "quasar";
-import { q, m, api } from '#imports'
+import { q, m, api, useLight } from '#imports'
+import { useI18n } from 'vue-i18n'
+
+const light = useLight()
+const { t } = useI18n()
 const quasar = useQuasar();
 let { app, my } = await q({ app: ['googleClientId'], my: ["gmail"] })
 
+const $q = useQuasar();
 my = reactive(my);
 
 const handleGoogleCredentialResponse = async (response) => {
@@ -14,11 +19,9 @@ const handleGoogleCredentialResponse = async (response) => {
         const resp = await q("my", ["gmail"]);
         my.gmail = resp.gmail;
 
-        quasar.notify({
+        light.notify({
             message: "Google account linked",
             color: "positive",
-            position: "top",
-            timeout: 2000
         });
     } catch (e) {
         console.log(e)
@@ -67,28 +70,41 @@ onMounted(() => {
 
 });
 
-const unlink = async () => {
-    await m("unlinkGoogle");
-    my.gmail = null;
-    window.location.reload();
+const onUnlink = async () => {
+
+    //confirm
+    light.dialog({
+        title: "Unlink",
+        color: "negative",
+        message: "Are you sure you want to unlink your Google account?",
+        ok: "Yes",
+        cancel: "No",
+    }).onOk(async () => {
+        await m("unlinkGoogle");
+        my.gmail = null;
+        window.location.reload();
+    })
+
 }
 
 </script>
 <template>
-    <l-card :bordered="false">
-
+    <q-card>
         <template v-if="app.googleClientId">
-            <q-card-section v-if="my.gmail">
-                <p>
-                    You have already linked your Google account.<br />
+            <template v-if="my.gmail">
+                <q-card-section>
+                    {{ $t('You have already linked your Google account.') }}<br />
+                    Your gmail id is {{ my.gmail }}
+                </q-card-section>
 
-                    Your gmail is {{ my.gmail }}
-                </p>
-                <l-btn label="Unlink" @click="unlink" icon="sym_o_delete"></l-btn>
-            </q-card-section>
+                <q-card-actions>
+                    <l-btn label="Unlink" @click="onUnlink" icon="sym_o_delete"></l-btn>
+                </q-card-actions>
+
+            </template>
 
             <q-card-section v-else>
-                Click the button below to link your Google account.
+                {{ $t('Click the button below to link your Google account.') }}
                 <div id="g_id_signin"></div>
             </q-card-section>
         </template>
@@ -96,6 +112,5 @@ const unlink = async () => {
         <q-card-section v-else>
             Google login is not available. Please set GOOGLE_CLIENT_ID in server settings.
         </q-card-section>
-
-    </l-card>
+    </q-card>
 </template>

package/dist/runtime/pages/User/setting/two-factor-auth.vue

@@ -48,8 +48,7 @@ const onCopy = () => {
     <l-form @submit="save" :bordered="false" v-if="show">
         <div>
             <p>
-                Now download the app and scan the qrcode. Input the code to the
-                following input and submit
+                {{ $t('Now download the app and scan the qrcode. Input the code to the following input and submit') }}
             </p>
             <p>
                 For Android user, install
@@ -84,7 +83,7 @@ const onCopy = () => {
         </p>
 
         <l-input v-model="obj.code" label="Code"
-            hint="Please scan the QR code with your authenticator app, and enter the code" required />
+            hint="Please scan the QR code with your authenticator app, and enter the code generated" required />
     </l-form>
     <div v-else>
         <q-card-section>