@hostlink/nuxt-light 0.0.88 → 0.0.90

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.88"
+  "version": "0.0.90"
 }

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

@@ -1,7 +1,8 @@
 <script setup>
+import { useLight } from "#imports";
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { useLight, q, getCurrentUser, m, f } from '../';
+import { q, getCurrentUser, m, f } from '../';
 import { ref, computed, reactive, provide, watch } from 'vue';
 import { useRuntimeConfig } from 'nuxt/app';
 
@@ -17,12 +18,6 @@ const quasar = useQuasar();
 quasar.dark.set(false);
 const light = useLight();
 
-const props = defineProps({
-    company: {
-        type: String
-    }
-});
-
 const tt = await q({
     app: ["menus", "viewAsMode", "languages", { i18nMessages: ["name", "value"] }],
     my: ["styles", "language", f('granted_storage:granted', { right: "system.storage" }, [])],
@@ -204,7 +199,7 @@ const storageUsagePercent = computed(() => {
                 <q-btn dense flat round icon="menu" class="q-mr-sm" @click="toggleLeftDrawer" />
 
                 <q-toolbar-title>
-                    {{ company }}
+                    {{ light.getCompany() }}
                 </q-toolbar-title>
 
                 <q-space />
@@ -338,7 +333,7 @@ const storageUsagePercent = computed(() => {
         <q-footer class="bg-white text-grey" bordered>
             <q-item>
                 <q-item-section>
-                    {{ company }} {{ appVersion }} - Copyright 2023 HostLink(HK). Build {{ light.getVersion() }}
+                    {{ light.getCompany() }} {{ appVersion }} - Copyright 2023 HostLink(HK). Build {{ light.getVersion() }}
                 </q-item-section>
             </q-item>
         </q-footer>

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

@@ -1,4 +1,5 @@
 <script setup>
+import { useLight } from "#imports";
 import { useRuntimeConfig } from 'nuxt/app'
 import { setApiUrl } from '@hostlink/light'
 import { Dialog } from 'quasar'
@@ -8,9 +9,11 @@ setApiUrl(config?.public?.apiBase ?? '/api/');
 
 
 let app = null
-
+const light = useLight()
 try {
     app = (await q({ app: ['company', 'companyLogo', 'logged', 'twoFactorAuthentication', 'googleClientId'] })).app;
+    light.setCompany(app.company);
+    light.setCompanyLogo(app.companyLogo);
 } catch (e) {
     Dialog.create({
         title: 'Error',
@@ -27,13 +30,13 @@ try {
     <q-layout v-if="!app.logged">
         <q-page-container class="bg-grey-2" style="color:#1f1f1f">
             <q-page padding>
-                <l-login :company="app.company" :company-logo="app.companyLogo"
-                    :twoFactorAuthentication="app.twoFactorAuthentication" :google-client-id="app.googleClientId"></l-login>
+                <l-login :twoFactojrAuthentication="app.twoFactorAuthentication"
+                    :google-client-id="app.googleClientId"></l-login>
             </q-page>
         </q-page-container>
     </q-layout>
 
-    <l-app-main v-else :company="app.company">
+    <l-app-main>
         <slot></slot>
     </l-app-main>
 </template>

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

@@ -1,19 +1,15 @@
 <script setup>
+import { useLight } from "#imports";
 import { ref, reactive, onMounted } from 'vue'
 import { useQuasar, Notify } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { m, notify } from '../';
 
-import { useRuntimeConfig } from 'nuxt/app';
-
 import { login, webauthnLogin } from '@hostlink/light';
 
-const config = useRuntimeConfig();
-
+const light = useLight();
 
 const props = defineProps({
-  company: String,
-  companyLogo: String,
   twoFactorAuthentication: Boolean,
   googleClientId: String
 })
@@ -178,9 +174,9 @@ onMounted(() => {
 <template>
   <q-card bordered flat style="min-width:400px;max-width: 400px;" class="fixed-center">
     <q-card-section>
-      <q-img :src="companyLogo" class="full-width" />
+      <q-img :src="light.getCompanyLogo()" class="full-width" />
       <div class="text-h6">
-        {{ company }}
+        {{ light.getCompany() }}
       </div>
       <q-form ref="form1">
         <div class="q-gutter-sm">

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

@@ -1,11 +1,31 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-const i18n = useI18n();
+import { ref } from 'vue'
+const props = defineProps(["value", "dense"])
+const menus = ref(null);
 
-defineProps(["value", "dense"])
 
-</script>
+const expansion = ref(null);
+
+const onShowChild = (menu) => {
+    menus.value.forEach((m) => {
+        if (m.value() !== menu) {
+            m.hide()
+        }
+    })
+}
 
+defineExpose({
+    hide: () => {
+        if (expansion.value) {
+            expansion.value.hide();
+        }
+    },
+    value: () => {
+        return props.value;
+    }
+})
+
+</script>
 
 <style scoped>
 .menu-list .q-item {
@@ -19,11 +39,12 @@ defineProps(["value", "dense"])
     color: #fff;
 }
 </style>
-
 <template>
-    <q-expansion-item v-if="value.children?.length > 0" :label="i18n.t(value.label)" :icon="value.icon" :dense="dense">
+    <q-expansion-item v-if="value.children?.length > 0" :label="$t(value.label)" :icon="value.icon" :dense="dense"
+        ref="expansion">
         <q-list class="q-pl-md">
-            <l-menu :value="menu" v-for="menu in value.children" :dense="dense"></l-menu>
+            <l-menu :value="menu" v-for="menu in value.children" :dense="dense" @show="onShowChild(menu)"
+                ref="menus"></l-menu>
         </q-list>
     </q-expansion-item>
     <q-list v-else class="menu-list" :dense="dense">
@@ -32,8 +53,8 @@ defineProps(["value", "dense"])
                 <q-icon :name="value.icon" />
             </q-item-section>
             <q-item-section>
-                <q-item-label v-text="i18n.t(value.label)"></q-item-label>
+                <q-item-label v-text="$t(value.label)"></q-item-label>
             </q-item-section>
         </q-item>
     </q-list>
-</template>
+</template>

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

@@ -1,11 +1,11 @@
 <script setup>
+import { useHead, useLight } from "#imports";
 import { useRouter, useRoute } from "vue-router"
 import { removeObject, getID } from '../'
-import { useI18n } from 'vue-i18n';
 
-const i18n = useI18n();
 const router = useRouter();
 const route = useRoute();
+const light = useLight();
 
 const props = defineProps({
     type: {
@@ -71,7 +71,12 @@ if (props.addBtn) {
     showAddBtn = true
 }
 
-const title = props.title || route.path.split("/")[1].replace(/([a-z])(?=[A-Z])/g, '$1 ').replace(/([A-Z]*)(?=[A-Z][a-z])/g, '$1 ')
+let title = props.title || route.path.split("/")[1].replace(/([a-z])(?=[A-Z])/g, '$1 ').replace(/([A-Z]*)(?=[A-Z][a-z])/g, '$1 ')
+
+//remove double space
+title = title.replace(/\s\s+/g, ' ');
+//trim title    
+title = title.trim()
 const module = route.path.split("/")[1];
 const onDelete = async () => {
 
@@ -79,6 +84,10 @@ const onDelete = async () => {
         router.push(`/${module}`);
     }
 }
+
+useHead({
+    title: light.getCompany() + " - " + title,
+})
 </script>
 
 <template>
@@ -88,7 +97,7 @@ const onDelete = async () => {
             <l-add-btn v-if="showAddBtn" />
             <l-edit-btn v-if="showEditBtn" />
             <l-delete-btn v-if="showDeleteBtn" @submit="onDelete" />
-            <q-toolbar-title>{{ i18n.t(title) }}</q-toolbar-title>
+            <q-toolbar-title>{{ $t(title) }}</q-toolbar-title>
         </q-toolbar>
 
         <div class="q-gutter-sm q-mb-sm">

package/dist/runtime/index.d.ts

@@ -5,6 +5,10 @@ interface Light {
     getStyle: (name: String, defaultValue: any) => any;
     setStyles: (styles: Object) => void;
     getVersion(): string;
+    getCompany(): string;
+    setCompany(company: string): void;
+    getCompanyLogo(): string;
+    setCompanyLogo(logo: string): void;
 }
-export declare function useLight(): Light;
+export declare const useLight: () => Light;
 export * from "./lib";

package/dist/runtime/index.mjs

@@ -1,8 +1,24 @@
 import packageJson from "../../package.json";
 const errors = [];
 let styles = {};
-export function useLight() {
+const app = {
+  company: "",
+  companyLogo: ""
+};
+export const useLight = () => {
   return {
+    setCompany: (company) => {
+      app.company = company;
+    },
+    getCompany: () => {
+      return app.company;
+    },
+    setCompanyLogo: (logo) => {
+      app.companyLogo = logo;
+    },
+    getCompanyLogo: () => {
+      return app.companyLogo;
+    },
     getVersion: () => {
       return packageJson.version;
     },
@@ -28,5 +44,5 @@ export function useLight() {
       styles = s;
     }
   };
-}
+};
 export * from "./lib/index.mjs";

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

@@ -18,6 +18,7 @@
     "System": "系統",
     "SystemBackup": "系統備份",
     "SystemValue": "系統值",
+    "System Value": "系統值",
     "Translate": "翻譯",
     "User": "使用者",
     "Setting": "設定",
@@ -151,5 +152,9 @@
     "Login": "登入",
     "Forget password": "忘記密碼",
     "Password is required": "密碼為必填",
-    "Username is required": "使用者名稱為必填"
+    "Username is required": "使用者名稱為必填",
+    "Export": "匯出",
+    "Event Log": "事件紀錄",
+    "Mail Log": "郵件紀錄",
+    "User Log": "使用者紀錄"
 }

package/dist/runtime/types/User.mjs

@@ -1,5 +1,3 @@
-import { loadSV, getSV } from "./../lib/SystemValue.mjs";
-loadSV("UserStatus");
 export default {
   username: {
     label: "Username",
@@ -39,7 +37,7 @@ export default {
   status: {
     label: "Status",
     format: (value) => {
-      return getSV("UserStatus", value);
+      return ["Active", "Inactive"][value];
     }
   }
 };

package/package.json

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

package/dist/runtime/system_menus.d.ts

@@ -1,10 +0,0 @@
-declare const _default: {
-    label: string;
-    icon: string;
-    menus: {
-        label: string;
-        link: string;
-        icon: string;
-    }[];
-}[];
-export default _default;

package/dist/runtime/system_menus.mjs

@@ -1,37 +0,0 @@
-export default [
-    {
-        label: "系統管理",
-        icon: "sym_o_settings",
-        menus: [
-            {
-                label: "使用者管理",
-                link: "/User",
-                icon: "sym_o_person"
-            }, {
-                label: "角色管理",
-                link: "/Role",
-                icon: "sym_o_group"
-            }, {
-                label: "權限管理",
-                link: "/Permission",
-                icon: "sym_o_key"
-            }, {
-                label: "系統設定",
-                link: "/Setting",
-                icon: "sym_o_settings"
-            }, {
-                label: "User log",
-                link: "/UserLog",
-                icon: "sym_o_description"
-            }, {
-                label: "Mail log",
-                link: "/MailLog",
-                icon: "sym_o_description"
-            }, {
-                label: "Event log",
-                link: "/EventLog",
-                icon: "sym_o_description"
-            }
-        ]
-    }
-];