@hostlink/nuxt-light 1.18.2 → 1.18.3

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.18.2",
+  "version": "1.18.3",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/L/ForgetPasswordDialog.vue

@@ -2,9 +2,10 @@
 import { ref } from 'vue'
 import { useQuasar, useDialogPluginComponent } from 'quasar'
 import { m, api } from '#imports';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
 const $q = useQuasar()
 
-
 const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
 
 const username = ref('')
@@ -13,7 +14,7 @@ const onOKClick = async () => {
     if (username.value == '' || email.value == '') {
         $q.notify({
             type: 'negative',
-            message: 'Username and Email is required'
+            message: t('Username and Email is required')
         })
         return;
     }
@@ -34,34 +35,31 @@ const onOKClick = async () => {
     } finally {
         $q.loading.hide();
     }
-
 }
-
 </script>
-
 <template>
     <q-dialog ref="dialogRef">
         <q-card class="q-dialog-plugin">
 
             <q-card-section class="q-dialog__title">
-                Forget Password
+                {{ t('Forget password') }}
             </q-card-section>
 
             <q-card-section class="q-dialog__message">
-                Please enter your username and email address, we will send you a code to reset your password
+                {{ t('Please enter your username and email address, we will send you a code to reset your password') }}
             </q-card-section>
 
             <q-card-section>
-                <q-input v-model="username" label="Username" stack-label
-                    :rules="[val => !!val || 'Username is required']" hide-bottom-space />
-                <q-input v-model="email" label="Email" stack-label type="email" hide-bottom-space
-                    :rules="[val => !!val || 'Email is required']" />
+                <q-input v-model="username" :label="$t('Username')" stack-label
+                    :rules="[val => !!val || $t('Username is required')]" hide-bottom-space />
+                <q-input v-model="email" :label="$t('Email')" stack-label type="email" hide-bottom-space
+                    :rules="[val => !!val || $t('Email is required')]" />
             </q-card-section>
 
 
             <q-card-actions align="right">
-                <q-btn label="Cancel" @click="onDialogCancel" flat color="primary" />
-                <q-btn label="OK" @click="onOKClick" flat color="primary" />
+                <q-btn :label="$t('Cancel')" @click="onDialogCancel" flat color="primary" />
+                <q-btn :label="$t('OK')" @click="onOKClick" flat color="primary" />
             </q-card-actions>
         </q-card>
     </q-dialog>

package/dist/runtime/components/L/System/Setting/modules.vue

@@ -39,7 +39,7 @@ const onSubmit = async (d, form) => {
         file_manager: modelValue.file_manager,
         revision: modelValue.revision
     }" @submit="onSubmit">
-        <q-field label="File manager" stack-label>
+        <q-field :label="$t('File Manager')" stack-label>
             <FormKit type="l-checkbox" label="Show" name="file_manager" true-value="1" false-value="0" />
         </q-field>
 

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

@@ -7,6 +7,8 @@ import { ref, computed, reactive, provide, watch, toRaw } from 'vue';
 import { useRuntimeConfig } from 'nuxt/app';
 import { api } from '#imports';
 
+const { t } = useI18n();
+
 const emits = defineEmits(["logout"]);
 const $q = useQuasar();
 $q.loading.show()
@@ -59,9 +61,8 @@ const tt = await q({
 let app = tt.app
 let my = reactive(tt.my)
 
-const light = useLight({
-    color: my.styles?.color || 'primary'
-});
+const light = useLight();
+
 light.init(my.styles);
 
 //set permission
@@ -158,9 +159,6 @@ const onChangeLocale = async (locale) => {
     window.location.reload();
 }
 
-const errors = computed(() => {
-    return light.getErrors();
-})
 
 const reloadMenu = async () => {
     //menus.value = app.menus;
@@ -231,23 +229,22 @@ const onToggleFav = async () => {
         return;
     }
 
-    $q.dialog({
+    light.dialog({
         title: 'Add to favorite',
         message: 'Enter favorite label',
         prompt: {
             //get window title, remove - and replace with space
             model: route.name.replace(/-/g, ' '),
+            isValid: (val) => val !== '',
         },
         cancel: true,
         persistent: true,
     }).onOk(async (data) => {
-        if (data === '') return;
         if (await m("addMyFavorite", {
             path: route.fullPath,
             label: data,
         })) {
             light.reloadMyFavorites();
-
         }
     })
 }
@@ -424,8 +421,8 @@ const onLogout = async () => {
 
         <q-page-container :class="containerClass" :style="containerStyle"> <!-- Error message -->
             <slot name="header"></slot>
-            <div class="q-gutter-sm q-pa-sm" v-if="errors.length > 0">
-                <q-banner dense inline-actions class="bg-grey-4" v-for=" error in errors " rounded>
+            <div class="q-gutter-sm q-pa-sm" v-if="$light.errors.length > 0">
+                <q-banner dense inline-actions class="bg-grey-4" v-for=" error in $light.errors " rounded>
                     {{ error }}
                     <template v-slot:action>
                         <q-btn flat label="Detail" @click="$q.dialog({
@@ -433,7 +430,7 @@ const onLogout = async () => {
                             message: error.stack,
                             fullWidth: true,
                         })"></q-btn>
-                        <q-btn flat icon="sym_o_close" round dense @click="light.removeError(error)" />
+                        <q-btn flat icon="sym_o_close" round dense @click="$light.removeError(error)" />
                     </template>
                 </q-banner>
 
@@ -461,7 +458,7 @@ const onLogout = async () => {
                 <q-item-section>
                     {{ light.company }} {{ appVersion }} - Copyright {{ app.copyrightYear }} {{ app.copyrightName
                     }}. Build
-                    {{ light.getVersion() }}
+                    {{ light.version }}
                 </q-item-section>
             </q-item>
         </q-footer>

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

@@ -42,8 +42,6 @@ try {
 }
 
 
-const color = ref(light.color);
-provide('color', color)
 
 </script>
 <template>

package/dist/runtime/components/l-edit-btn.vue

@@ -1,3 +1,3 @@
 <template>
-     <q-btn flat round icon="sym_o_edit" to="edit" />
+     <q-btn flat round dense icon="sym_o_edit" to="edit" />
 </template>

package/dist/runtime/components/l-form-dialog.vue

@@ -82,8 +82,7 @@ const onCancel = async () => {
 <template>
     <q-dialog ref="dialogRef">
 
-        <q-card :style="{ width }" :loading="loading">
-
+        <q-card :style="{ width }" :loading="loading" class="q-dialog-plugin">
             <q-toolbar>
                 <q-toolbar-title v-if="title">
                     {{ title }}

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

@@ -11,7 +11,7 @@ export interface LInputProps extends QInputProps {
     required?: boolean;
 }
 
-const i18n = useI18n();
+const { t } = useI18n();
 const light = useLight();
 
 const props = withDefaults(defineProps<LInputProps>(), {
@@ -37,13 +37,13 @@ const new_rules = props.rules || [];
 
 //has required prop (in properties)
 if (props.required) {
-    new_rules.push(val => !!val || i18n.t('input_required', [i18n.t(props.label ?? "")]));
+    new_rules.push(val => !!val || t('input_required', [t(props.label ?? "")]));
 }
 
 if (props.type == "email") {
     new_rules.push(val => {
         if (val && !val.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
-            return i18n.t("Invalid email format");
+            return t("Invalid email format");
         }
     });
 }
@@ -51,7 +51,7 @@ if (props.type == "email") {
 if (new_rules.indexOf("containUpper") >= 0) {
     new_rules.push(val => {
         if (val && !val.match(/[A-Z]/)) {
-            return i18n.t("Must contain at least one uppercase letter");
+            return t("Must contain at least one uppercase letter");
         }
     });
 }
@@ -59,7 +59,7 @@ if (new_rules.indexOf("containUpper") >= 0) {
 if (new_rules.indexOf("containLower") >= 0) {
     new_rules.push(val => {
         if (val && !val.match(/[a-z]/)) {
-            return i18n.t("Must contain at least one lowercase letter");
+            return t("Must contain at least one lowercase letter");
         }
     });
 }
@@ -67,7 +67,7 @@ if (new_rules.indexOf("containLower") >= 0) {
 if (new_rules.indexOf("containNumber") >= 0) {
     new_rules.push(val => {
         if (val && !val.match(/[0-9]/)) {
-            return i18n.t("Must contain at least one number");
+            return t("Must contain at least one number");
         }
     });
 }
@@ -75,7 +75,7 @@ if (new_rules.indexOf("containNumber") >= 0) {
 if (new_rules.indexOf("containSpecial") >= 0) {
     new_rules.push(val => {
         if (val && !val.match(/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/)) {
-            return i18n.t("Must contain at least one symbol");
+            return t("Must contain at least one symbol");
         }
     });
 }
@@ -90,7 +90,7 @@ if (minLength) {
     const min = parseInt(minLength.replace("minLength:", ""));
     new_rules.push(val => {
         if (val && val.length < min) {
-            return i18n.t("input_min", [min]);
+            return t("input_min", [min]);
         }
     });
 }
@@ -139,7 +139,7 @@ const attrs = computed(() => {
     if (props.stackLabel === undefined) a.stackLabel = light.getStyle("inputStackLabel");
 
     if (props.label) {
-        a.label = i18n.t(props.label);
+        a.label = t(props.label);
 
         if (props.required) {
             a.label = "* " + a.label;
@@ -147,6 +147,11 @@ const attrs = computed(() => {
     }
 
     if (props.color === undefined) a.color = light.color
+
+    if (props.hint) {
+        a.hint = t(props.hint);
+    }
+
     return a;
 })
 

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

@@ -2,6 +2,9 @@
 import { ref, reactive, onMounted } from 'vue'
 import { useQuasar } from 'quasar';
 import { api, useHead } from '#imports';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const emits = defineEmits(["login"]);
 
@@ -26,8 +29,8 @@ const $q = useQuasar()
 
 const loginWithCode = (username, password) => {
   $q.dialog({
-    title: "Enter your code",
-    message: "Please enter your two factor authentication code (If you lost your authenticator, please contact your administrator)",
+    title: t("Enter your code"),
+    message: t("Please enter your two factor authentication code (If you lost your authenticator, please contact your administrator)"),
     prompt: {
       type: "text",
       required: true
@@ -73,8 +76,8 @@ const submit = async () => {
 
 const resetPassword = (username, code) => {
   $q.dialog({
-    title: "Reset password",
-    message: "Please enter your new password",
+    title: t("Reset password"),
+    message: t("Please enter your new password"),
     prompt: {
       model: "",
       type: "password",
@@ -88,7 +91,7 @@ const resetPassword = (username, code) => {
     try {
       await api.auth.resetPassword(username, password, code);
       $q.notify({
-        message: "Your password has been reset successfully",
+        message: t("Your password has been reset successfully"),
         color: "positive",
         icon: "sym_o_check",
       });
@@ -110,8 +113,8 @@ const forgetPassword = async () => {
     component: resolveComponent("l-forget-password-dialog"),
   }).onOk(async (data) => {
     $q.dialog({
-      title: "Enter your code",
-      message: "Please enter the code sent to your email, your code will expire in 10 minutes",
+      title: t("Enter your code"),
+      message: t("Please enter the code sent to your email, your code will expire in 10 minutes"),
       prompt: {
         type: "text",
         required: true
@@ -123,7 +126,7 @@ const forgetPassword = async () => {
         resetPassword(data.username, code);
       } else {
         $q.notify({
-          message: "Your code is invalid",
+          message: t("Your code is invalid or expired"),
           color: "negative",
           icon: "sym_o_error",
         });

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

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type { QTabPanelProps, QTabProps } from 'quasar';
 import { getCurrentInstance } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const instance = getCurrentInstance();
 defineProps<QTabPanelProps | QTabProps>()
@@ -17,7 +20,7 @@ const parent_type = instance?.parent?.type.name
     </template>
 
     <template v-if="parent_type == 'QTabs'">
-        <q-tab v-bind="$props">
+        <q-tab v-bind="$props" :label="$t($props.label ?? '')">
         </q-tab>
     </template>
 

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { QTabsProps } from 'quasar';
-import { onMounted, useSlots } from '#imports';
+import { useSlots } from '#imports';
 const model = defineModel<string | number | null | undefined>()
-export interface LTabsProps extends  QTabsProps {
+export interface LTabsProps extends QTabsProps {
 }
 defineProps<LTabsProps>();
 const slots = useSlots()
@@ -16,12 +16,10 @@ if (model.value === undefined) {
     <l-card>
         <q-tabs class="text-grey" :active-color="$light.color" :indicator-color="$light.color" align="justify"
             v-model="model">
-
             <slot></slot>
         </q-tabs>
         <q-tab-panels v-model="model">
             <slot></slot>
-            <!-- component v-for="tab in tabContents" :key="tab.name" :is="tab.content?.default" :name="tab.name" /-->
         </q-tab-panels>
     </l-card>
 </template>

package/dist/runtime/index.d.ts

@@ -1,56 +1,4 @@
 import { type FormKitInputs } from '@formkit/inputs';
-export interface User {
-    user_id?: number;
-    username: string;
-    password: string;
-    first_name: string;
-    last_name?: string;
-    email: string;
-    language?: string;
-}
-declare const app: {
-    company: string;
-    companyLogo: string;
-    color: string;
-    theme: string;
-    isAdmin: boolean;
-    permissions: string[];
-    myFavorites: any[];
-    users: {
-        create: (user: User) => Promise<User>;
-        del: (user_id: number) => Promise<any>;
-        update: (id: number, user: User) => Promise<any>;
-        list: (args: any) => Promise<any>;
-    };
-    roles: {
-        list: () => Promise<any>;
-    };
-    getColorValue: () => string;
-    setMyFavorites: (favorites: Array<any>) => void;
-    reloadMyFavorites: () => Promise<void>;
-    getMyFavorites: () => any[];
-    isDarkMode: () => boolean;
-    getVersion: () => string;
-    addError: (err: Error) => void;
-    getErrors: () => Error[];
-    removeError: (error: Error) => void;
-    getStyle: (name: string) => any;
-    setStyles: (s: Object) => void;
-    getStyles: () => {
-        [key: string]: any;
-    };
-    setStyle: (name: string, value: any) => Promise<void>;
-    setCurrentRoute: (to: any) => void;
-    getID: () => number | null;
-    init: (styles: any) => void;
-    isGranted: (right?: string) => boolean;
-    setPermissions: (permissions: Array<string>) => void;
-};
-declare module 'vue' {
-    interface ComponentCustomProperties {
-        $light: typeof app;
-    }
-}
 declare module '@formkit/inputs' {
     interface FormKitInputProps<Props extends FormKitInputs<Props>> {
         lInput: {
@@ -86,44 +34,5 @@ declare module '@formkit/inputs' {
         };
     }
 }
-export declare const useLight: (options?: {
-    color?: string;
-}) => {
-    company: string;
-    companyLogo: string;
-    color: string;
-    theme: string;
-    isAdmin: boolean;
-    permissions: string[];
-    myFavorites: any[];
-    users: {
-        create: (user: User) => Promise<User>;
-        del: (user_id: number) => Promise<any>;
-        update: (id: number, user: User) => Promise<any>;
-        list: (args: any) => Promise<any>;
-    };
-    roles: {
-        list: () => Promise<any>;
-    };
-    getColorValue: () => string;
-    setMyFavorites: (favorites: Array<any>) => void;
-    reloadMyFavorites: () => Promise<void>;
-    getMyFavorites: () => any[];
-    isDarkMode: () => boolean;
-    getVersion: () => string;
-    addError: (err: Error) => void;
-    getErrors: () => Error[];
-    removeError: (error: Error) => void;
-    getStyle: (name: string) => any;
-    setStyles: (s: Object) => void;
-    getStyles: () => {
-        [key: string]: any;
-    };
-    setStyle: (name: string, value: any) => Promise<void>;
-    setCurrentRoute: (to: any) => void;
-    getID: () => number | null;
-    init: (styles: any) => void;
-    isGranted: (right?: string) => boolean;
-    setPermissions: (permissions: Array<string>) => void;
-};
+export { useLight } from "./light.js";
 export * from "./lib/index.js";

package/dist/runtime/index.js

@@ -1,198 +1,2 @@
-import packageJson from "../../package.json";
-import { watch, reactive, toRaw } from "vue";
-import { m, q } from "./lib/index.js";
-const errors = reactive([]);
-let styles = {};
-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 defaultStyle = {
-  inputOutlined: true,
-  inputStackLabel: true,
-  tableFlat: true,
-  tableBorder: true,
-  tableSeparator: "cell"
-};
-const app = reactive({
-  company: "",
-  companyLogo: "",
-  color: "",
-  theme: "light",
-  isAdmin: false,
-  permissions: Array(),
-  myFavorites: Array(),
-  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[app.color];
-  },
-  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";
-  },
-  getVersion: () => {
-    return packageJson.version;
-  },
-  addError: (err) => {
-    errors.push(err);
-  },
-  getErrors: () => {
-    return errors;
-  },
-  removeError: (error) => {
-    const index = errors.indexOf(error);
-    if (index > -1) {
-      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) {
-    app.color = styles2.color || "primary";
-    app.theme = styles2.theme || "semi-dark";
-    app.setStyles(styles2);
-    watch(() => app.theme, async () => {
-      await app.setStyle("theme", app.theme);
-    });
-  },
-  isGranted(right) {
-    if (right === void 0) return true;
-    if (app.permissions.includes("*")) return true;
-    if (app.permissions.includes(right)) return true;
-    const parts = right.split(".");
-    parts.pop();
-    do {
-      if (app.permissions.includes(parts.join(".") + ".*")) return true;
-      parts.pop();
-    } while (parts.length > 0);
-    return false;
-  },
-  setPermissions(permissions) {
-    this.permissions = permissions;
-  }
-});
-let currentRoute = null;
-watch(() => app.color, async () => {
-  await m("updateMyStyle", {
-    name: "color",
-    value: app.color
-  });
-});
-export const useLight = (options = {}) => {
-  if (options.color !== void 0) {
-    toRaw(app).color = options.color;
-  }
-  return app;
-};
+export { useLight } from "./light.js";
 export * from "./lib/index.js";