@hostlink/nuxt-light 1.13.6 → 1.14.0

package/dist/module.json

@@ -1,5 +1,9 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.13.6"
+  "version": "1.14.0",
+  "builder": {
+    "@nuxt/module-builder": "0.8.3",
+    "unbuild": "2.0.0"
+  }
 }

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

@@ -1,18 +1,18 @@
 <script setup>
 import { useRoute, useRouter } from 'vue-router';
 import { useLight, q, m } from "#imports";
-import { useQuasar, Loading } from 'quasar';
+import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { ref, computed, reactive, provide, watch, toRaw } from 'vue';
 import { useRuntimeConfig } from 'nuxt/app';
 
-Loading.show()
+const $q = useQuasar();
+$q.loading.show()
 
 const config = useRuntimeConfig();
 
 const appVersion = config.public.appVersion ?? '0.0.1';
 
-const quasar = useQuasar();
 const tt = await q({
     system: {
         devMode: true,
@@ -74,7 +74,7 @@ const myFavoritesCount = computed(() => {
     return light.getMyFavorites().length;
 });
 
-quasar.dark.set(light.isDarkMode());
+$q.dark.set(light.isDarkMode());
 
 const i18n = useI18n();
 i18n.locale = my.language || 'en';
@@ -172,7 +172,7 @@ watch(() => style.dense, async (value) => await light.setStyle("dense", value))
 
 
 watch(() => light.theme, async () => {
-    quasar.dark.set(light.isDarkMode());
+    $q.dark.set(light.isDarkMode());
 })
 
 watch(() => style.miniState, async (value) => {
@@ -228,7 +228,7 @@ const onToggleFav = async () => {
         return;
     }
 
-    quasar.dialog({
+    $q.dialog({
         title: 'Add to favorite',
         message: 'Enter favorite label',
         prompt: {
@@ -257,7 +257,7 @@ const isFav = computed(() => {
     return fav;
 })
 
-Loading.hide()
+$q.loading.hide()
 
 const menuWidth = ref(my.styles.menuWidth || 280);
 
@@ -306,7 +306,7 @@ if (route.fullPath == "/" && my.default_page) {
                     </q-tooltip>
                 </q-btn>
 
-                <q-btn v-if="languages.length > 1" round flat icon="language" class="q-mr-xs">
+                <q-btn v-if="languages.length > 1" round flat dense icon="language" class="q-mr-xs">
                     <q-tooltip>
                         {{ my.language }}
                     </q-tooltip>
@@ -334,8 +334,11 @@ if (route.fullPath == "/" && my.default_page) {
                         {{ my.first_name }} {{ my.last_name }}
                     </div>
 
-                    <div class="text-right">
-                        {{ my.roles[0] }}
+                    <div class="text-right ellipsis" style="max-width: 120px;">
+                        {{ my.roles.join(", ") }}
+                        <q-tooltip>
+                            {{ my.roles.join(", ") }}
+                        </q-tooltip>
                     </div>
                 </div>
 
@@ -430,7 +433,7 @@ if (route.fullPath == "/" && my.default_page) {
                 </template>
             </router-view -->
             <NuxtLoadingIndicator />
-            
+
             <NuxtPage />
 
 

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useLight } from '#imports';
+import type { QBarProps } from 'quasar';
+import { computed } from 'vue';
+
+export type LBarProps = QBarProps;
+
+const light = useLight();
+const barClass = computed(() => {
+    const c = ["text-white"];
+    const color = light.color;
+    c.push(`bg-${color}`);
+    return c;
+});
+</script>
+
+<template>
+    <q-bar :class="barClass">
+        <slot></slot>
+    </q-bar>
+</template>

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { type QBtnProps } from "quasar";
-import { computed, inject, unref, toRaw } from "vue";
+import { computed } from "vue";
 import { useLight } from '#imports';
 import { useI18n } from "vue-i18n";
 
-export interface LBtnProps extends QBtnProps {
+export interface LBtnProps extends  QBtnProps {
     permission?: string;
 }
 

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

@@ -8,7 +8,7 @@ const emit = defineEmits(["close"]);
 const minimized = defineModel<boolean>("minimized", { default: false })
 const maximized = defineModel<boolean>("maximized", { default: false })
 
-export interface LCardProps extends QCardProps {
+export interface LCardProps extends  QCardProps {
     loading?: boolean;
     title?: string;
     /**

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

@@ -2,7 +2,7 @@
 import { computed } from "vue"
 import { type QCheckboxProps } from "quasar"
 
-export interface LCheckboxProps extends QCheckboxProps {
+export interface LCheckboxProps extends  QCheckboxProps {
 }
 
 const emit = defineEmits(["update:modelValue"]);

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

@@ -75,11 +75,24 @@ const props = defineProps({
 const time_diff = ref(new Date().getTime() - new Date(props.time).getTime());
 const server_time = ref(new Date(props.time).toLocaleTimeString());
 const server_date = ref(new Date(props.time).toLocaleDateString());
+let start;
 
-setInterval(() => {
-    server_time.value = new Date(new Date().getTime() - time_diff.value).toLocaleTimeString();
-    server_date.value = new Date(new Date().getTime() - time_diff.value).toLocaleDateString();
-}, 500);
+const refreshServerTime = (timestamp) => {
+    if (!start) start = timestamp;
+    let elapsed = timestamp - start;
+
+
+    if (elapsed > 1000) {
+        server_time.value = new Date(new Date().getTime() - time_diff.value).toLocaleTimeString();
+        server_date.value = new Date(new Date().getTime() - time_diff.value).toLocaleDateString();
+        start = timestamp;
+    }
+
+    //refresh every second
+    requestAnimationFrame(refreshServerTime);
+}
+
+requestAnimationFrame(refreshServerTime);
 
 
 </script>
@@ -132,7 +145,8 @@ setInterval(() => {
                 <q-item-label>Menu dense mode</q-item-label>
             </q-item-section>
             <q-item-section side>
-                <q-toggle :model-value="dense" @update:model-value="$emit('update:dense', $event)" :color="$light.color" />
+                <q-toggle :model-value="dense" @update:model-value="$emit('update:dense', $event)"
+                    :color="$light.color" />
             </q-item-section>
         </q-item>
 
@@ -143,8 +157,8 @@ setInterval(() => {
                 <q-item-label>Menu overlay header</q-item-label>
             </q-item-section>
             <q-item-section side>
-                <q-toggle :model-value="menuOverlayHeader" @update:model-value="$emit('update:menuOverlayHeader', $event)"
-                    :color="$light.color" />
+                <q-toggle :model-value="menuOverlayHeader"
+                    @update:model-value="$emit('update:menuOverlayHeader', $event)" :color="$light.color" />
             </q-item-section>
         </q-item>
 

package/dist/runtime/components/l-dialog-database-field-add.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar'
+
+const props = defineProps({
+    // ...your custom props
+})
+
+defineEmits([
+    // REQUIRED; need to specify some events that your
+    // component will emit through useDialogPluginComponent()
+    ...useDialogPluginComponent.emits
+])
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
+// dialogRef      - Vue ref to be applied to QDialog
+// onDialogHide   - Function to be used as handler for @hide on QDialog
+// onDialogOK     - Function to call to settle dialog with "ok" outcome
+//                    example: onDialogOK() - no payload
+//                    example: onDialogOK({ /*...*/ }) - with payload
+// onDialogCancel - Function to call to settle dialog with "cancel" outcome
+
+// this is part of our example (so not required)
+function onOKClick(value) {
+    // on OK, it is REQUIRED to
+    // call onDialogOK (with optional payload)
+    onDialogOK(value)
+    // or with payload: onDialogOK({ ... })
+    // ...and it will also hide the dialog automatically
+}
+
+const types = ["varchar", "int", "date", "time", "datetime", "timestamp", "text", "blob", "json", "jsonb", "uuid", "boolean", "decimal", "float", "double", "real", "numeric", "smallint", "bigint", "tinyint", "mediumint", "char", "binary", "varbinary", "enum"]
+</script>
+
+
+<template>
+    <q-dialog ref="dialogRef" @hide="onDialogHide">
+        <q-card class="q-dialog-plugin">
+            <l-bar>
+                <q-space />
+                <q-btn dense flat icon="sym_o_close" @click="onDialogCancel" />
+            </l-bar>
+            <form-kit type="l-form" @submit="onOKClick" :value="{
+                name: '',
+                type: '',
+                length: '',
+                default: '',
+                nullable: false,
+                autoincrement: false
+            }">
+                <form-kit type="l-input" name="name" label="Name" validation="required" />
+                <form-kit type="l-select" name="type" label="Type" :options="types" validation="required" />
+                <form-kit type="l-input" name="length" label="Length" />
+                <form-kit type="l-input" name="default" label="Default" />
+                <form-kit type="l-checkbox" name="nullable" label="Nullable" />
+                <form-kit type="l-checkbox" name="autoincrement" label="Autoincrement" />
+            </form-kit>
+
+
+        </q-card>
+    </q-dialog>
+</template>

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

@@ -27,7 +27,7 @@ const TextHightlightCMD = ((cmd, name) => {
     edit.focus()
 })
 
-export interface LEditorProps extends QEditorProps {
+export interface LEditorProps extends  QEditorProps {
 }
 
 const emit = defineEmits(["update:modelValue"]);

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

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useQuasar } from "quasar";
@@ -28,12 +28,17 @@ const props = defineProps({
     submitIcon: {
         type: String,
         default: "sym_o_save"
+    },
+    noRedirect: {
+        type: Boolean,
+        default: false
     }
+
 });
 
 const loading = ref(false)
 
-const emit = defineEmits(["save", "submit"]);
+const emit = defineEmits(["save", "submit", "submitted"]);
 const save = async () => {
 
     let valid = await form.value.validate();
@@ -50,12 +55,23 @@ const save = async () => {
         try {
             if (route.params[id_name]) {//edit
                 if (await model(module).update(parseInt(route.params[id_name]), props.modelValue)) {
-                    router.push(`/${module}`);
+
+                    if (!props.noRedirect) {
+                        router.push(`/${module}`);
+                    }
+
+                    emit('submitted');
+
                     return;
                 }
             } else {
                 if (await model(module).add(props.modelValue)) {
-                    router.push(`/${module}`);
+
+                    if (!props.noRedirect) {
+                        router.push(`/${module}`);
+                    }
+
+                    emit('submitted');
                     return;
                 }
             }
@@ -78,7 +94,7 @@ const onSubmit = (e) => {
 </script>
 <template>
     <q-form ref="form" @submit="onSubmit">
-        <l-card :bordered="bordered" >
+        <l-card :bordered="bordered">
             <q-card-section>
                 <div :class="`q-gutter-${gutter}`">
                     <slot></slot>

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

@@ -5,7 +5,7 @@ import tc2sc from "../lib/tc2sc";
 import { useLight } from '#imports';
 
 import type { QInputProps } from "quasar";
-export interface LInputProps extends QInputProps {
+export interface LInputProps extends  QInputProps {
     showPassword?: boolean;
     translate?: boolean;
     required?: boolean;

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { QItemProps } from 'quasar';
 
-export interface LItemProps extends QItemProps {
+export interface LItemProps extends  QItemProps {
     label?: string;
     type?: 'text' | 'caption';
     name?: string;

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

@@ -2,7 +2,7 @@
 
 import type { QListProps } from 'quasar';
 
-export interface LListProps extends QListProps {
+export interface LListProps extends  QListProps {
     fields?: any[];
     modelValue?: any;
 }

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

@@ -1,12 +1,11 @@
 <script setup>
 import { useLight } from "#imports";
 import { ref, reactive, onMounted } from 'vue'
-import { useQuasar, Dialog } from 'quasar';
+import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { m, notify, api } from '#imports';
 
 
-
 const light = useLight();
 
 const props = defineProps({
@@ -20,7 +19,7 @@ const data = reactive({
   username: "", password: "", code: ""
 });
 
-const qua = useQuasar()
+const $q = useQuasar()
 
 const submit = async () => {
   if (await form1.value.validate()) {
@@ -36,83 +35,70 @@ const submit = async () => {
 }
 
 const forgetPassword = async () => {
-  Dialog.create({
+  $q.dialog({
     title: i18n.t("Forget password"),
     message: "Please enter your email address, we will send you a code to reset your password",
     prompt: {
-      model: "",
       type: "email",
+      required: true,
+      isValid: (val) => {
+        //test val is email
+        const re = /\S+@\S+\.\S+/;
+        return re.test(val);
+      }
     },
     cancel: true
   }).onOk(async email => {
-    if (email.length == 0) {
-      return;
-    }
-
+    $q.loading.show();
     try {
-      await m("forgetPassword", { email: email });
-      qua.dialog({
-        title: "Enter your code",
-        message: "Please enter the code sent to your email, your code will expire in 10 minutes",
-        prompt: {
-          model: "",
-          type: "text"
-        },
-        cancel: true,
-        persistent: true
-      }).onOk(async code => {
-        if (code.length == 0) {
-          return;
-        }
-
-        if (await m("verifyCode", { code: code, email: email })) {
-          qua.dialog({
-            title: "Reset password",
-            message: "Please enter your new password",
-            prompt: {
-              model: "",
-              type: "password"
-            },
-          }).onOk(async password => {
-            if (password.length == 0) {
-              return;
-            }
-
-            if (await m("resetPassword", { password: password, email: email, code: code })) {
-              qua.notify({
-                message: "Your password has been reset successfully",
-                color: "positive",
-                icon: "sym_o_check",
-                position: "top",
-                timeout: 2000
-              });
-            }
-          });
-        } else {
-          qua.notify({
-            message: "Your code is invalid",
-            color: "negative",
-            icon: "sym_o_error",
-            position: "top",
-            timeout: 2000
-          });
-
-        }
-
-
-      });
+      await api.auth.forgetPassword(email);
     } catch (e) {
-      qua.notify({
+      $q.notify({
         message: e.message,
         color: "negative",
         icon: "sym_o_error",
-        position: "top",
-        timeout: 2000
       });
+      return;
+    } finally {
+      $q.loading.hide();
     }
-  });
-
 
+    $q.dialog({
+      title: "Enter your code",
+      message: "Please enter the code sent to your email, your code will expire in 10 minutes",
+      prompt: {
+        type: "text",
+        required: true
+      },
+      cancel: true,
+      persistent: true
+    }).onOk(async code => {
+      if (await api.auth.verifyCode(email, code)) {
+        $q.dialog({
+          title: "Reset password",
+          message: "Please enter your new password",
+          required: true,
+          prompt: {
+            type: "password"
+          },
+        }).onOk(async password => {
+          if (await api.auth.resetPassword(email, password, code)) {
+            $q.notify({
+              message: "Your password has been reset successfully",
+              color: "positive",
+              icon: "sym_o_check",
+            });
+          }
+        });
+      } else {
+        $q.notify({
+          message: "Your code is invalid",
+          color: "negative",
+          icon: "sym_o_error",
+        });
+      }
+    });
+  });
 };
 
 const hasBioLogin = ref(false);
@@ -122,7 +108,7 @@ if (localStorage.getItem("username")) {
 }
 const bioLogin = async () => {
   try {
-    await webauthnLogin(localStorage.getItem("username"));
+    await api.auth.WebAuthn.login(localStorage.getItem("username"));
     window.self.location.reload();
   } catch (e) {
     notify(e.message, "negative");
@@ -131,7 +117,7 @@ const bioLogin = async () => {
 }
 const handleGoogleCredentialResponse = async (response) => {
   try {
-    await m("googleLogin", { credential: response.credential });
+    await api.auth.googleLogin(response.credential);
     window.self.location.reload();
   } catch (e) {
     notify(e.message, "negative");
@@ -140,15 +126,11 @@ const handleGoogleCredentialResponse = async (response) => {
 
 onMounted(() => {
   if (props.googleClientId) {
-
-
     if (!window.google) {
-      qua.notify({
+      $q.notify({
         message: "Google login is not available", //set script https://accounts.google.com/gsi/client in nuuxt.config.js
         color: "negative",
         icon: "sym_o_error",
-        position: "top",
-        timeout: 2000
       });
       return;
 

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

@@ -9,17 +9,20 @@ const router = useRouter();
 const route = useRoute();
 const light = useLight();
 
-export interface LPageProps extends QPageProps {
+export type LPageProps = QPageProps & {
     title?: string;
     backBtn?: boolean;
     editBtn?: boolean;
     deleteBtn?: boolean;
     addBtn?: boolean;
+    gutter?: string;
+    padding?: boolean
 }
 
 const props = withDefaults(defineProps<LPageProps>(), {
     title: "",
     backBtn: true,
+    padding: true,
 });
 
 const showToolbar = computed(() => {
@@ -49,10 +52,21 @@ const onDelete = async () => {
 useHead({
     title: light.getCompany() + " - " + title,
 })
+
+const localClass = computed(() => {
+    return {
+        "q-gutter-none": props.gutter === "none",
+        "q-gutter-xs": props.gutter === "xs",
+        "q-gutter-sm": props.gutter === "sm",
+        "q-gutter-md": props.gutter === "md",
+        "q-gutter-lg": props.gutter === "lg",
+        "q-gutter-xl": props.gutter === "xl",
+    }
+})
 </script>
 
 <template>
-    <q-page padding>
+    <q-page :padding="props.padding" :class="localClass">
         <!-- q-breadcrumbs>
             <q-breadcrumbs-el icon="home" to="/" />
             <q-breadcrumbs-el label="Permission" to="/Permission" />

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

@@ -8,7 +8,7 @@ const emits = defineEmits(["update:modelValue"]);
 
 const { t } = useI18n();
 const light = useLight();
-interface LSelectProps extends QSelectProps {
+interface LSelectProps extends  QSelectProps {
     required?: boolean,
 }
 

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

@@ -428,9 +428,10 @@ const onDelete = async (id: any) => {
         table.value.requestServerInteraction();
     }
 }
-
 const attrs = computed(() => {
     return {
+        ...props,
+        
         ...{
             dense: light.getStyle("tableDense"),
             flat: light.getStyle("tableFlat"),

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

@@ -2,7 +2,7 @@
 import type { QTabsProps } from 'quasar';
 import { onMounted, 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()