@hostlink/nuxt-light 1.18.1 → 1.18.3

package/dist/module.json

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

package/dist/module.mjs

@@ -5,11 +5,6 @@ import { quasar } from '@quasar/vite-plugin';
 
 const resolver = createResolver(import.meta.url);
 const routes = [
-  {
-    name: "logout",
-    path: "/logout",
-    file: resolver.resolve("./runtime/pages/logout.vue")
-  },
   {
     name: "EventLog",
     path: "/EventLog",

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

@@ -5,12 +5,17 @@ import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 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()
 
 const config = useRuntimeConfig();
 
+
 const appVersion = config.public.appVersion ?? '0.0.1';
 
 const tt = await q({
@@ -56,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
@@ -155,9 +159,6 @@ const onChangeLocale = async (locale) => {
     window.location.reload();
 }
 
-const errors = computed(() => {
-    return light.getErrors();
-})
 
 const reloadMenu = async () => {
     //menus.value = app.menus;
@@ -228,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();
-
         }
     })
 }
@@ -274,6 +274,11 @@ if (route.fullPath == "/" && my.default_page) {
 
 }
 
+const onLogout = async () => {
+    await api.auth.logout();
+    emits('logout');
+}
+
 </script>
 
 <style scoped>
@@ -287,7 +292,7 @@ if (route.fullPath == "/" && my.default_page) {
                 <q-btn dense flat round icon="menu" class="q-mr-sm" @click="toggleLeftDrawer" />
 
                 <q-toolbar-title>
-                    {{ light.getCompany() }}
+                    {{ light.company }}
                     <template v-if="tt.system.devMode">
                         - Development mode
                     </template>
@@ -344,7 +349,7 @@ if (route.fullPath == "/" && my.default_page) {
 
                 <q-btn flat round dense icon="sym_o_person" class="q-mr-sm">
                     <q-menu max-width="250px">
-                        <q-list >
+                        <q-list>
                             <q-item v-close-popup to="/User/profile">
                                 <q-item-section avatar>
                                     <q-icon name="sym_o_person" />
@@ -375,7 +380,7 @@ if (route.fullPath == "/" && my.default_page) {
 
                             <q-separator />
 
-                            <q-item v-close-popup to="/logout">
+                            <q-item @click="onLogout" clickable>
                                 <q-item-section avatar>
                                     <q-icon name="logout" />
                                 </q-item-section>
@@ -416,8 +421,8 @@ if (route.fullPath == "/" && my.default_page) {
 
         <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({
@@ -425,7 +430,7 @@ if (route.fullPath == "/" && my.default_page) {
                             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>
 
@@ -451,9 +456,9 @@ if (route.fullPath == "/" && my.default_page) {
         <q-footer bordered v-if="style.footer">
             <q-item>
                 <q-item-section>
-                    {{ light.getCompany() }} {{ appVersion }} - Copyright {{ app.copyrightYear }} {{ app.copyrightName
+                    {{ 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

@@ -15,10 +15,10 @@ watch(route, (to, from) => {
     light.setCurrentRoute(to);
 });
 
+const app = ref(null)
 
-let app = null
 try {
-    app = (await q({
+    app.value = (await q({
         app: {
             company: true,
             companyLogo: true,
@@ -28,8 +28,8 @@ try {
             forgetPasswordEnabled: true
         }
     })).app;
-    light.setCompany(app.company);
-    light.setCompanyLogo(app.companyLogo);
+    light.company = app.value.company;
+    light.companyLogo = app.value.companyLogo;
 } catch (e) {
 
     quasar.dialog({
@@ -42,28 +42,21 @@ try {
 }
 
 
-const color = ref(light.color);
-provide('color', color)
 
 </script>
 <template>
     <q-layout v-if="!app.logged">
         <q-page-container class="bg-grey-2" style="color:#1f1f1f">
             <q-page padding>
-                <l-login v-bind="app"></l-login>
+                <l-login v-bind="app" @login="app.logged = true"></l-login>
             </q-page>
         </q-page-container>
     </q-layout>
 
-    <l-app-main v-else>
-
+    <l-app-main v-else @logout="app.logged = false">
         <template #header>
             <slot name="header"></slot>
         </template>
 
-
-
-
-
     </l-app-main>
 </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

@@ -1,33 +1,36 @@
 <script setup>
-import { useLight } from "#imports";
 import { ref, reactive, onMounted } from 'vue'
 import { useQuasar } from 'quasar';
+import { api, useHead } from '#imports';
 import { useI18n } from 'vue-i18n';
-import { m, api } from '#imports';
 
+const { t } = useI18n();
 
-const light = useLight();
+const emits = defineEmits(["login"]);
 
 const props = defineProps({
   twoFactorAuthentication: Boolean,
   googleClientId: String,
-  forgetPasswordEnabled: Boolean
+  forgetPasswordEnabled: Boolean,
+  company: String,
+  companyLogo: String
 })
 
-const { t } = useI18n();
+useHead({
+  title: props.company
+})
 
 const form1 = ref(null);
 const data = reactive({
   username: "", password: "", code: ""
 });
 
-
 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
@@ -48,7 +51,9 @@ const submit = async () => {
 
     try {
       await api.auth.login(data.username, data.password, data.code)
-      window.self.location.reload();
+      //window.self.location.reload();
+      //
+      emits("login");
     } catch (e) {
       data.code = "";
 
@@ -71,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",
@@ -86,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",
       });
@@ -108,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
@@ -121,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",
         });
@@ -191,13 +196,13 @@ onMounted(() => {
 <template>
   <q-card bordered flat style="min-width:360px" class="fixed-center">
     <q-card-section>
-      <q-img :src="light.getCompanyLogo()" class="full-width">
+      <q-img :src="companyLogo" class="full-width">
         <template v-slot:error>
           <q-img src="https://raw.githubusercontent.com/HostLink/.github/master/profile/logo.webp" class="full-width" />
         </template>
       </q-img>
       <div class="text-h6">
-        {{ light.getCompany() }}
+        {{ company }}
       </div>
       <q-form ref="form1">
         <div class="q-gutter-sm">

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

@@ -50,8 +50,9 @@ const onDelete = async () => {
 
 }
 
+console.log(light)
 useHead({
-    title: light.getCompany() + " - " + title,
+    title: light.company + " - " + title,
 })
 
 const localClass = computed(() => {

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,60 +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;
-    setCompany: (company: string) => void;
-    getCompany: () => string;
-    setCompanyLogo: (logo: string) => void;
-    getCompanyLogo: () => string;
-    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: {
@@ -90,48 +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;
-    setCompany: (company: string) => void;
-    getCompany: () => string;
-    setCompanyLogo: (logo: string) => void;
-    getCompanyLogo: () => string;
-    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";