@hostlink/nuxt-light 0.0.98 → 0.0.99

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.98"
+  "version": "0.0.99"
 }

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

@@ -2,7 +2,7 @@
 import { useLight } from "#imports";
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { q, getCurrentUser, m, f } from '../';
+import { q, m, f } from '../';
 import { ref, computed, reactive, provide, watch } from 'vue';
 import { useRuntimeConfig } from 'nuxt/app';
 
@@ -15,39 +15,37 @@ const config = useRuntimeConfig();
 const appVersion = config.public.appVersion ?? '0.0.1';
 
 const quasar = useQuasar();
-quasar.dark.set(false);
-const light = useLight();
-
 const tt = await q({
     app: ["menus", "viewAsMode", "languages", { i18nMessages: ["name", "value"] }],
-    my: ["styles", "language", f('granted_storage:granted', { right: "system.storage" }, [])],
+    my: ['username', 'first_name', 'last_name', 'roles', "styles", "language", f('granted_storage:granted', { right: "system.storage" }, [])],
 })
 
-
 let app = tt.app
 let my = tt.my
-let system = null
-if (my.granted_storage) {
-    system = await q("system", ["diskFreeSpace", "diskUsageSpace", "diskTotalSpace", "diskFreeSpacePercent"]);
-}
-
-light.setStyles(my.styles);
 
+const light = useLight();
+light.init(my.styles);
 
-const menus = ref(app.menus)
+quasar.dark.set(light.isDarkMode());
 
 const i18n = useI18n();
 i18n.locale = my.language || 'en';
 
-let messages = i18n.messages.value[i18n.locale];
+let system = null
+if (my.granted_storage) {
+    system = await q("system", ["diskFreeSpace", "diskUsageSpace", "diskTotalSpace", "diskFreeSpacePercent"]);
+}
 
+// message
+let messages = i18n.messages.value[i18n.locale];
 for (let t of app.i18nMessages) {
     messages[t.name] = t.value;
 }
-
 i18n.setLocaleMessage(i18n.locale, messages);
 
-const user = ref(await getCurrentUser());
+//menu
+const menus = ref(app.menus)
+
 
 const leftDrawerOpen = ref(false)
 const rightDrawerOpen = ref(false)
@@ -61,7 +59,7 @@ const toggleRightDrawer = () => {
 }
 
 let showViewAs = false;
-if (user.value && user.value.roles.indexOf('Administrators') != -1) {
+if (my && my.roles.indexOf('Administrators') != -1) {
     showViewAs = true;
 }
 
@@ -74,10 +72,9 @@ const layoutView = computed(() => {
 })
 
 const style = reactive({
-    color: my.styles?.color || 'bg-primary',
-    theme: my.styles?.theme || 'semi-dark',
     miniState: my.styles?.miniState || false,
-    dense: my.styles?.dense || false
+    dense: my.styles?.dense || false,
+    footer: my.styles?.footer || false
 });
 
 const isMouseOnDrawer = ref(false)
@@ -93,10 +90,11 @@ const isMini = computed(() => {
 })
 
 const menuDark = computed(() => {
-    if (style.theme == 'dark') {
+
+    if (light.theme == 'dark') {
         return true
     }
-    if (style.theme == 'semi-dark') {
+    if (light.theme == 'semi-dark') {
         return true
     }
     return false
@@ -123,29 +121,12 @@ const reloadMenu = async () => {
 
 provide('reloadMenu', reloadMenu)
 
+watch(() => style.footer, async (value) => await light.setStyle("footer", value))
+watch(() => style.dense, async (value) => await light.setStyle("dense", value))
 
-watch(() => style.dense, async (value) => {
-    await m("updateMyStyle", {
-        name: "dense",
-        value: value
-    });
-})
-
-watch(() => style.color, async (value) => {
-    await m("updateMyStyle", {
-        name: "color",
-        value: value
-    })
 
-    my.styles["color"] = value;
-    light.setStyles(my.styles);
-})
-
-watch(() => style.theme, async (value) => {
-    await m("updateMyStyle", {
-        name: "theme",
-        value: value
-    })
+watch(() => light.theme, async () => {
+    quasar.dark.set(light.isDarkMode());
 })
 
 watch(() => style.miniState, async (value) => {
@@ -190,11 +171,24 @@ const storageUsagePercent = computed(() => {
     return 0;
 })
 
+const containerClass = computed(() => {
+    return (light.theme == 'dark') ? {} : { 'bg-grey-2': true }
+})
+
+const containerStyle = computed(() => {
+    if (light.theme == 'dark') {
+        return {};
+    }
+    return {
+        color: '#1f1f1f'
+    }
+})
+
 </script>
 
 <template>
     <q-layout :view="layoutView">
-        <q-header bordered class="text-white" :class="`bg-${style.color}`">
+        <q-header bordered class="text-white" :class="`bg-${light.color}`">
             <q-toolbar>
                 <q-btn dense flat round icon="menu" class="q-mr-sm" @click="toggleLeftDrawer" />
 
@@ -218,7 +212,7 @@ const storageUsagePercent = computed(() => {
                 </q-btn>
 
                 <q-btn icon="sym_o_storage" flat round dense class="q-mr-sm" v-if="my.granted_storage"
-                    :color="storageColor">
+                    :color="storageColor" >
                     <q-menu>
                         <q-card style="width:250px">
                             <q-card-section>
@@ -234,13 +228,13 @@ const storageUsagePercent = computed(() => {
 
                 </q-btn>
 
-                <div class="q-mx-sm" v-if="$q.platform.is.desktop">
+                <div class="q-mx-sm" v-if="$q.screen.gt.xs">
                     <div class="text-bold text-right">
-                        {{ user.first_name }} {{ user.last_name }}
+                        {{ my.first_name }} {{ my.last_name }}
                     </div>
 
                     <div class="text-right">
-                        {{ user.roles[0] }}
+                        {{ my.roles[0] }}
                     </div>
                 </div>
 
@@ -303,13 +297,14 @@ const storageUsagePercent = computed(() => {
         <q-drawer overlay v-model="rightDrawerOpen" side="right" bordered>
             <!-- drawer content -->
             <q-scroll-area class="fit">
-                <l-customizer v-model:headerColor="style.color" v-model:theme="style.theme"
-                    v-model:miniState="style.miniState" v-model:dense="style.dense"
-                    v-model:menuOverlayHeader="style.menuOverlayHeader" />
+                <l-customizer v-model:color="light.color" v-model:theme="light.theme" v-model:miniState="style.miniState"
+                    v-model:dense="style.dense" v-model:menuOverlayHeader="style.menuOverlayHeader"
+                    v-model:footer="style.footer" />
             </q-scroll-area>
         </q-drawer>
 
-        <q-page-container class="bg-grey-2" style="color:#1f1f1f">
+        <q-page-container :class="containerClass" :style="containerStyle">
+            
             <!-- Error message -->
             <q-banner dense inline-actions class="bg-grey-4 q-ma-md" v-for="error in errors" rounded>
                 {{ error }}
@@ -330,7 +325,7 @@ const storageUsagePercent = computed(() => {
         </q-page-container>
 
 
-        <q-footer class="bg-white text-grey" bordered>
+        <q-footer bordered v-if="style.footer">
             <q-item>
                 <q-item-section>
                     {{ light.getCompany() }} {{ appVersion }} - Copyright 2023 HostLink(HK). Build {{ light.getVersion() }}

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

@@ -1,7 +1,6 @@
 <script setup>
 import { useLight } from '../'
 import { useAttrs, ref, computed } from 'vue'
-import Style from '../pages/User/setting/style.vue';
 
 defineProps({
     loading: Boolean,
@@ -10,7 +9,6 @@ defineProps({
 
 const light = useLight();
 
-
 const attrs = {
     ...{
         flat: light.getStyle("cardFlat", true),
@@ -19,9 +17,12 @@ const attrs = {
     }, ...useAttrs()
 }
 
-const color = light.getStyle("color", 'primary');
-
-const cl = ["text-white", `bg-${color}`];
+const cl = computed(() => {
+    const c = ["text-white"];
+    const color = light.color;
+    c.push(`bg-${color}`);
+    return c;
+});
 
 const minimize = ref(false);
 
@@ -39,7 +40,6 @@ const showBody = computed(() => !minimize.value || fullScreen.value);
         <q-bar :class="cl" v-if="title">
             <div>{{ title }}</div>
             <q-space />
-           
             <!-- q-btn-dropdown dense flat icon="sym_o_search" persistent>
                 <div class="q-ma-md">
                     <q-input></q-input>

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

@@ -1,4 +1,5 @@
 <script setup>
+import { defineModel } from 'vue'
 const COLORS = [
     'primary',
     'secondary',
@@ -26,10 +27,12 @@ const COLORS = [
     'brown',
     'grey',
     'blue-grey'
-
 ]
 
-defineEmits(['update:theme', 'update:menuOverlayHeader', 'update:dense', 'update:headerColor', 'update:miniState'])
+defineEmits(['update:theme', 'update:menuOverlayHeader', 'update:dense', 'update:color', 'update:miniState', 'update:footer'])
+
+const color = defineModel("color", { type: String, default: "primary" })
+
 
 const props = defineProps({
     menuOverlayHeader: {
@@ -44,13 +47,13 @@ const props = defineProps({
         type: Boolean,
         default: false
     },
-    headerColor: {
-        type: String,
-        default: 'bg-primary'
-    },
     dense: {
         type: Boolean,
         default: false
+    },
+    footer: {
+        type: Boolean,
+        default: false
     }
 })
 
@@ -80,10 +83,10 @@ const props = defineProps({
         <q-separator />
         <q-item>
             <q-item-section>
-                <q-item-label>Header color</q-item-label>
+                <q-item-label>Color</q-item-label>
                 <div class="row">
                     <div v-for="c in COLORS" :key="c" :class="`bg-${c}`" style="width: 1.5rem; height: 1.5rem;"
-                        class="q-ma-xs cursor-pointer rounded-borders" @click="$emit('update:headerColor', c)" />
+                        class="q-ma-xs cursor-pointer rounded-borders" @click="$emit('update:color', c)" />
                 </div>
             </q-item-section>
         </q-item>
@@ -118,5 +121,17 @@ const props = defineProps({
                     @update:model-value="$emit('update:menuOverlayHeader', $event)" />
             </q-item-section>
         </q-item>
+
+        <q-separator />
+
+        <q-item>
+            <q-item-section>
+                <q-item-label>Show footer</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+                <q-toggle :model-value="footer" @update:model-value="$emit('update:footer', $event)" />
+            </q-item-section>
+        </q-item>
+
     </q-list>
 </template>

package/dist/runtime/components/l-file-manager.vue

@@ -3,7 +3,7 @@ import { VariableType } from "json-to-graphql-query";
 import { useI18n } from "vue-i18n";
 import { ref, watch, computed } from 'vue';
 import { useQuasar } from 'quasar';
-import { q, m } from '../';
+import { q, m, useLight } from '../';
 import {
   fsListFolders, fsCreateFolder, fsDeleteFolder, fsDeleteFile, fsRenameFile, fsRenameFolder, fsReadFile,
   granted
@@ -11,6 +11,7 @@ import {
 } from "@hostlink/light";
 
 
+const light = useLight();
 const i18n = useI18n();
 const quasar = useQuasar();
 const emit = defineEmits(["input", "close"]);
@@ -456,10 +457,14 @@ const canRenameRow = (row) => {
 /* const perm = await q("granted", {
   rights: ["fs.folder.create"]
 }) */
+
+
+const isDark = computed(() => light.isDarkMode());
+
 </script>
 <template>
-  <q-layout view="hHh lpR fFf" class="bg-white" container :style="{ 'min-height': height }">
-    <q-header bordered class="bg-white text-grey-8" height-hint="64">
+  <q-layout view="hHh lpR fFf" :class="isDark ? '' : 'bg-white'" container :style="{ 'min-height': height }">
+    <q-header bordered :class="isDark?'':'bg-white text-grey-8'" height-hint="64">
       <q-toolbar>
         <q-btn flat round @click="toggleLeftDrawer" aria-label="Menu" icon="menu" class="q-mr-sm" />
 
@@ -481,7 +486,7 @@ const canRenameRow = (row) => {
       </q-toolbar>
     </q-header>
 
-    <q-drawer v-model="leftDrawerOpen" show-if-above bordered class="bg-white" :width="257">
+    <q-drawer v-model="leftDrawerOpen" show-if-above bordered :width="257">
       <q-scroll-area class="fit">
         <q-list padding class="text-grey-8">
           <q-item>

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

@@ -42,7 +42,7 @@ const new_rules = props.rules || [];
 
 //has required prop (in properties)
 if (props.required) {
-    new_rules.push(val => !!val || 'Required.');
+    new_rules.push(val => !!val || i18n.t('input_required',[i18n.t(props.label)]));
 }
 
 if (props.type == "email") {

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

@@ -172,7 +172,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <q-card bordered flat style="min-width:400px;max-width: 400px;" class="fixed-center">
+  <q-card bordered flat style="min-width:360px;max-width: 400px;" class="fixed-center">
     <q-card-section>
       <q-img :src="light.getCompanyLogo()" class="full-width" />
       <div class="text-h6">

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { reactive } from 'vue'
 import { useQuasar, QTable } from 'quasar';
 import { ref, computed, onMounted, useSlots, useAttrs } from "vue";
 import { t, deleteObject, q, useLight, GQLFieldBuilder } from '../';
@@ -288,10 +289,10 @@ const onRequest = async (p: any) => {
 
             let localFilters = getFilterValue();
 
-/*             console.log("merge filters", filters)
-            
-            console.log("local filters", getFilterValue())
- */            //merge the filters
+            /*             console.log("merge filters", filters)
+                        
+                        console.log("local filters", getFilterValue())
+             */            //merge the filters
             if (filters) {
                 localFilters = {
                     ...localFilters,
@@ -400,9 +401,6 @@ const onDelete = async (id: any) => {
     }
 }
 
-
-//style
-
 const attrs = {
     ...{
         dense: light.getStyle("tableDense", false),
@@ -429,6 +427,11 @@ const filterFn = (val, update, abort) {
     })
 },
  */
+
+const isDark = computed(() => {
+    return light.theme == "dark";
+
+})
 </script>
 
 <template>
@@ -455,7 +458,8 @@ const filterFn = (val, update, abort) {
 
     <q-table v-bind="attrs" :row-key="rowKey" :loading="loading" :rows="rows" ref="table" @request="onRequest"
         :rows-per-page-label="$t(props.rowsPerPageLabel)" :columns="renderColumns"
-        :rows-per-page-options="rowsPerPageOptions" :selection="selection" v-model:pagination="pagination" :filter="filter">
+        :rows-per-page-options="rowsPerPageOptions" :selection="selection" v-model:pagination="pagination" :filter="filter"
+        :no-data-label="$t('No data available')" :loading-label="$t('Loading...')">
 
         <template #top-right="props" v-if="fullscreen || searchable">
             <q-input v-if="searchable" outlined dense debounce="300" v-model="filter" placeholder="Search">
@@ -482,7 +486,7 @@ const filterFn = (val, update, abort) {
 
         <template #body-cell-_actions="props">
             <q-td :props="props" auto-width>
-                <div class="text-grey-8">
+                <div :class="{ 'text-grey-8': !isDark }">
 
                     <l-view-btn v-if="actionView && props.row.canView"
                         :to="`/${modelName}/${props.row[primaryKey]}/view`" />

package/dist/runtime/index.d.ts

@@ -1,16 +1,26 @@
-interface Light {
+export declare const useLight: () => {
+    company: string;
+    companyLogo: string;
+    color: string;
+    theme: string;
+    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, defaultValue: any) => any;
-    setStyles: (styles: Object) => void;
-    getVersion(): string;
-    getCompany(): string;
-    setCompany(company: string): void;
-    getCompanyLogo(): string;
-    setCompanyLogo(logo: string): void;
-    setCurrentRoute(to: any, from: any): void;
-    getID(): Number | null;
-}
-export declare const useLight: () => Light;
+    getStyle: (name: String, defaultdefaultValue: any) => any;
+    setStyles: (s: Object) => void;
+    getStyles: () => {
+        theme?: String | undefined;
+        color?: String | undefined;
+    };
+    setStyle: (name: String, value: any) => Promise<void>;
+    setCurrentRoute: (to: any, from: any) => void;
+    getID: () => number | null;
+    init: (styles: any) => void;
+};
 export * from "./lib";

package/dist/runtime/index.mjs

@@ -1,62 +1,88 @@
 import packageJson from "../../package.json";
+import { watch, reactive } from "vue";
+import { m } from "./lib/index.mjs";
 const errors = [];
 let styles = {};
-const app = {
+const app = reactive({
   company: "",
-  companyLogo: ""
-};
+  companyLogo: "",
+  color: "primary",
+  theme: "light",
+  isDarkMode: () => {
+    return app.theme == "dark";
+  },
+  setCompany: (company) => {
+    app.company = company;
+  },
+  getCompany: () => {
+    return app.company;
+  },
+  setCompanyLogo: (logo) => {
+    app.companyLogo = logo;
+  },
+  getCompanyLogo: () => {
+    return app.companyLogo;
+  },
+  getVersion: () => {
+    return packageJson.version;
+  },
+  addError: (error) => {
+    errors.push(error);
+  },
+  getErrors: () => {
+    return errors;
+  },
+  removeError: (error) => {
+    const index = errors.indexOf(error);
+    if (index > -1) {
+      errors.splice(index, 1);
+    }
+  },
+  getStyle(name, defaultdefaultValue) {
+    if (styles[name] === void 0) {
+      return defaultdefaultValue;
+    }
+    return styles[name];
+  },
+  setStyles(s) {
+    styles = s;
+  },
+  getStyles() {
+    return styles;
+  },
+  async setStyle(name, value) {
+    await m("updateMyStyle", {
+      name,
+      value
+    });
+    styles[name] = value;
+  },
+  setCurrentRoute(to, from) {
+    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";
+    watch(() => app.color, async () => {
+      await app.setStyle("color", app.color);
+    });
+    watch(() => app.theme, async () => {
+      await app.setStyle("theme", app.theme);
+    });
+  }
+});
 let currentRoute = null;
 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;
-    },
-    addError: (error) => {
-      errors.push(error);
-    },
-    getErrors: () => {
-      return errors;
-    },
-    removeError: (error) => {
-      const index = errors.indexOf(error);
-      if (index > -1) {
-        errors.splice(index, 1);
-      }
-    },
-    getStyle(name, defaultdefaultValue) {
-      if (styles[name] === void 0) {
-        return defaultdefaultValue;
-      }
-      return styles[name];
-    },
-    setStyles(s) {
-      styles = s;
-    },
-    setCurrentRoute(to, from) {
-      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]);
-    }
-  };
+  return app;
 };
 export * from "./lib/index.mjs";

package/dist/runtime/locales/en.json

@@ -11,5 +11,6 @@
     "Theme Customizer": "Theme Customizer",
     "Customize & Preview in Real Time": "Customize & Preview in Real Time",
     "Permission": "Permission",
-    "storage_usage":"{0} free of {1}"
+    "storage_usage":"{0} free of {1}",
+    "input_required": "Please input {0}"
 }

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

@@ -156,6 +156,10 @@
     "Export": "匯出",
     "Event Log": "事件紀錄",
     "Mail Log": "郵件紀錄",
-    "User Log": "使用者紀錄"
+    "User Log": "使用者紀錄",
+    "input_required": "{0}為必填",
+    "Invalid email format": "電郵格式錯誤",
+    "No data available": "沒有資料",
+    "Loading...": "載入中..."
     
 }

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

@@ -1,7 +1,7 @@
 <script setup>
 import { reactive } from 'vue'
 import { getObject } from '../../../'
-const obj = reactive(await getObject(["first_name", "last_name", "email", "phone",
+const obj = reactive(await getObject(["username", "first_name", "last_name", "email", "phone",
     "addr1", "addr2", "addr3", "join_date", "expiry_date", "status", "language", "default_page"
 ]))
 </script>
@@ -11,9 +11,10 @@ const obj = reactive(await getObject(["first_name", "last_name", "email", "phone
         <l-form v-model="obj" gutter="none">
             <l-row>
                 <l-col md="6" gutter="md">
+                    <l-input label="Username" v-model="obj.username" required />
                     <l-input label="First name" v-model="obj.first_name" required />
                     <l-input label="Last name" v-model="obj.last_name" />
-                    <l-input label="Email" v-model="obj.email" required type="email"  />
+                    <l-input label="Email" v-model="obj.email" required type="email" />
                 </l-col>
                 <l-col md="6" gutter="md">
                     <l-input label="Phone" v-model="obj.phone" />

package/package.json

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