@hostlink/nuxt-light 1.19.1 → 1.19.3

package/dist/module.json

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

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

@@ -3,7 +3,16 @@ import { q, m } from '#imports'
 import { useQuasar } from 'quasar'
 const $q = useQuasar()
 
-const modelValue = defineModel<{
+
+const emits = defineEmits(["submit"])
+
+const { authorizationUrl } = await q({
+    authorizationUrl: true
+})
+
+console.log(authorizationUrl);
+
+withDefaults(defineProps<{
     mail_driver: string,
     mail_host: string
     mail_port: string
@@ -14,70 +23,57 @@ const modelValue = defineModel<{
     mail_from_name: string
     mail_reply_to: string
     mail_reply_to_name: string
-}>()
+}>(), {
+    mail_driver: "mail",
+})
 
-if (!modelValue.value.mail_driver) {
-    modelValue.value.mail_driver = "mail"
-}
-
-const onSubmit = async (d) => {
-    let data = [];
-    Object.keys(d).forEach((key) => {
-        if (d[key] === undefined) {
-            d[key] = ""
-        }
-
-        data.push({
-            name: key,
-            value: d[key]
-        })
-    })
-    await m("updateAppConfigs", { data })
-    //update the props.data
-    Object.keys(d).forEach((key) => {
-        modelValue.value[key] = d[key]
-    })
-    $q.notify({ message: "Settings saved", color: "positive" })
+const onLoginGmail = () => {
+    let state = encodeURIComponent(window.self.location.origin + window.self.location.pathname + "?mail_driver=gmail");
+    let url = "https://accounts.google.com/o/oauth2/v2/auth?scope=openid%20email%20profile%20https%3A%2F%2Fmail.google.com%2F&access_type=offline&state=" + state + "&response_type=code&redirect_uri=https%3A%2F%2Fraymond4.hostlink.com.hk%2Flight%2Fgmail_notification%2Fredirect.php&client_id=790028313082-8qqnoqvkqtqssufto11k6qe6pnievcpv.apps.googleusercontent.com&prompt=consent";
+    window.open(url, "_blank");
 }
 
 </script>
 <template>
-    <FormKit type="l-form" :bordered="false" :value="{
-        mail_driver: modelValue.mail_driver,
-        mail_host: modelValue.mail_host,
-        mail_port: modelValue.mail_port,
-        mail_username: modelValue.mail_username,
-        mail_password: modelValue.mail_password,
-        mail_encryption: modelValue.mail_encryption,
-        mail_from: modelValue.mail_from,
-        mail_from_name: modelValue.mail_from_name,
-        mail_reply_to: modelValue.mail_reply_to,
-        mail_reply_to_name: modelValue.mail_reply_to_name,
-    }" @submit="onSubmit" #default="{ value }">
+    <FormKit type="l-form" :bordered="false" :value="$props" @submit="$emit('submit', $event)" #default="{ value }">
+        {{ authorizationUrl }}
 
         <FormKit type="l-select" label="Mail Driver" name="mail_driver" :options="[{
             label: 'Mail', value: 'mail'
         }, {
             label: 'SMTP', value: 'smtp'
-        }]" validation="required"></FormKit>
-
-        <FormKit type="l-input" label="From Address" name="mail_from" validation="email"></FormKit>
-        <FormKit type="l-input" label="From Name" name="mail_from_name"></FormKit>
-        <FormKit type="l-input" label="Reply To Address" name="mail_reply_to" validation="email">
-        </FormKit>
-        <FormKit type="l-input" label="Reply To Name" name="mail_reply_to_name"></FormKit>
-
-        <template v-if="value.mail_driver === 'smtp'">
-            <FormKit type="l-input" label="SMTP Host" name="mail_host"></FormKit>
-            <FormKit type="l-input" label="SMTP Port" name="mail_port"></FormKit>
-            <FormKit type="l-input" label="SMTP Username" name="mail_username"></FormKit>
-            <FormKit type="l-input" label="SMTP Password" name="mail_password"></FormKit>
-
-            <FormKit type="l-select" label="SMTP Encryption" name="mail_encryption" :options="[
-                { label: 'None', value: '' },
-                { label: 'SSL', value: 'ssl' },
-                { label: 'TLS', value: 'tls' },
-            ]"></FormKit>
+        },
+        {
+            label: 'Gmail', value: 'gmail'
+        }
+        ]" validation="required"></FormKit>
+
+        <template v-if="value.mail_driver === 'gmail'">
+            <l-btn label="Login" @click="onLoginGmail"></l-btn>
+        </template>
+
+        <template v-else>
+
+
+            <FormKit type="l-input" label="From Address" name="mail_from" validation="email"></FormKit>
+            <FormKit type="l-input" label="From Name" name="mail_from_name"></FormKit>
+            <FormKit type="l-input" label="Reply To Address" name="mail_reply_to" validation="email">
+            </FormKit>
+            <FormKit type="l-input" label="Reply To Name" name="mail_reply_to_name"></FormKit>
+
+            <template v-if="value.mail_driver === 'smtp'">
+                <FormKit type="l-input" label="SMTP Host" name="mail_host"></FormKit>
+                <FormKit type="l-input" label="SMTP Port" name="mail_port"></FormKit>
+                <FormKit type="l-input" label="SMTP Username" name="mail_username"></FormKit>
+                <FormKit type="l-input" label="SMTP Password" name="mail_password"></FormKit>
+
+                <FormKit type="l-select" label="SMTP Encryption" name="mail_encryption" :options="[
+                    { label: 'None', value: '' },
+                    { label: 'SSL', value: 'ssl' },
+                    { label: 'TLS', value: 'tls' },
+                ]"></FormKit>
+            </template>
+
         </template>
 
 

package/dist/runtime/components/l-date-picker.vue

@@ -28,7 +28,8 @@ export interface LDatePickerProps {
     stackLabel?: boolean
     rules?: any[],
     range?: boolean,
-    mask?: string
+    mask?: string,
+    disable?: boolean
 }
 
 const props = withDefaults(defineProps<LDatePickerProps>(), {
@@ -41,7 +42,8 @@ const props = withDefaults(defineProps<LDatePickerProps>(), {
     square: undefined,
     stackLabel: undefined,
     mask: "YYYY-MM-DD",
-    range: false
+    range: false,
+    disable: false
 })
 
 
@@ -59,7 +61,7 @@ const localValue = computed({
         return modelValue.value
     },
     set: (value: string) => {
-        
+
 
         if (props.range) {
             //try to split

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

@@ -1,6 +1,10 @@
 <script setup>
 
 import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+
+
+const { t } = useI18n();
 
 const props = defineProps(["to"]);
 
@@ -9,10 +13,11 @@ const emit = defineEmits(["submit"]);
 const qua = useQuasar();
 const onDelete = () => {
     qua.dialog({
-        title: "Delete",
-        message: "Are you sure you want to delete this record?",
+        title: t("Delete"),
+        message: t("Are you sure you want to delete this record?"),
         cancel: true,
-        persistent: true
+        persistent: true,
+        color: "negative",
     }).onOk(async () => {
         emit("submit");
     })

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

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

package/dist/runtime/components/l-user-userlog.vue

@@ -1,13 +1,29 @@
 <script setup lang="ts">
 import { model, q } from "#imports";
-const props = defineProps(['id']);
+const props = defineProps({
+    id: String
+});
+
+const columns = model('UserLog').columns({
+    userlog_id: true,
+    login_dt: true,
+    last_access_time: true,
+    logout_dt: true,
+    result: true,
+    user_agent: true
+}
+);
+
+
+
+const onRequestData = async (req) => {
+    req.loadObjects('UserLog', { user_id: props.id })
+}
+
 
-const columns = model('UserLog').columns(["userlog_id", "login_dt", "last_access_time", "logout_dt", "result", "user_agent"]);
 </script>
 <template>
-    <div>
-        <l-table row-key="userlog_id" sort-by="userlog_id:desc" :columns="columns" @request-data="async (req) => {
-            req.loadObjects('UserLog', { filters: { user_id: props.id } })
-        }" />
-    </div>
+
+    <l-table row-key="userlog_id" sort-by="userlog_id:desc" :columns="columns" @request-data="onRequestData" />
+
 </template>

package/dist/runtime/formkit/Checkbox.vue

@@ -15,8 +15,8 @@ const { error, errorMessage } = getErrorMessage(props.context.node);
 </script>
 <template>
 
-    <l-checkbox v-model="value" :label="context.label" v-bind="context.attrs" :error="error"
-        :error-message="errorMessage">
+    <l-checkbox v-model="value" :error="error" :error-message="errorMessage" :disable="context.disabled"
+        v-bind="context.attrs" :label="context.label">
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>
         </template>

package/dist/runtime/formkit/DatePicker.vue

@@ -16,7 +16,7 @@ const value = computed({
 </script>
 <template>
     <l-date-picker v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
-        :error-message="errorMessage">
+        :error-message="errorMessage" :disable="context.disabled">
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>
         </template>

package/dist/runtime/formkit/Input.vue

@@ -2,8 +2,6 @@
 import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
 
-
-
 const props = defineProps({
     context: {
         type: Object,
@@ -49,8 +47,12 @@ const onBlur = () => {
 }
 </script>
 <template>
+
     <l-input v-model="value" :label="context?.label" v-bind="context?.attrs" :error="error" :type="context?.inputType"
-        :error-message="errorMessage" @blur="onBlur">
+        :error-message="errorMessage" @blur="onBlur"
+        :disable="context.disabled"
+        
+        >
 
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>

package/dist/runtime/formkit/Select.vue

@@ -33,7 +33,7 @@ if (required) { //no clearable
 </script>
 <template>
     <l-select v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :error-message="errorMessage"
-        :clearable="clearable" :required="required">
+        :clearable="clearable" :required="required" :disable="context.disabled">
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>
         </template>

package/dist/runtime/formkit/Toggle.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 
 const props = defineProps({
@@ -10,9 +10,11 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-
 </script>
 <template>
-    <q-toggle v-model="value" :label="context.label" v-bind="context.attrs">
+
+    <q-toggle v-model="value" :label="context.label" :disable="context.disabled" :color="$light.color"
+        v-bind="context.attrs">
+        <slot></slot>
     </q-toggle>
 </template>

package/dist/runtime/formkit/index.js

@@ -13,6 +13,7 @@ import FileVue from "./File.vue";
 import InputXlsxVue from "./InputXlsx.vue";
 import FileUploadVue from "./FileUpload.vue";
 import EditorVue from "./Editor.vue";
+import ToggleVue from "./Toggle.vue";
 export const createLightPlugin = () => {
   return (node) => {
     let type = node.props.type + "";
@@ -98,6 +99,11 @@ export const createLightPlugin = () => {
           ],
           features: [forms, disablesChildren]
         });
+      case "l-toggle":
+        return node.define({
+          type: "input",
+          component: ToggleVue
+        });
     }
   };
 };

package/dist/runtime/pages/EventLog/_eventlog_id/view.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { getObject } from "#imports"
-const obj = await getObject(["eventlog_id", "class", "id", "action", "created_time", "username", "source", "target"]);
+const obj = await getObject(["eventlog_id", "class", "id", "action", "created_time", "username", "source", "target", "different"]);
 
 const splitterModel = 50;
 </script>
@@ -17,7 +17,7 @@ const splitterModel = 50;
 
             </l-list>
 
-            <q-splitter v-model="splitterModel" >
+            <q-splitter v-model="splitterModel">
                 <template v-slot:before>
                     <div class="q-pa-md">
                         <div class="text-h6 q-mb-md">{{ $t('Source') }}</div>
@@ -28,12 +28,16 @@ const splitterModel = 50;
                 <template v-slot:after>
                     <div class="q-pa-md">
                         <div class="text-h6 q-mb-md">{{ $t('Target') }}</div>
-                        <pre>{{ obj.target }}
-                    </pre>
-
+                        <pre>{{ obj.target }}</pre>
                     </div>
                 </template>
             </q-splitter>
+
+            <q-separator />
+            <div class="q-pa-md">
+                <div class="text-h6 q-mb-md">{{ $t('Different') }}</div>
+                <pre>{{ obj.different }}</pre>
+            </div>
         </l-card>
 
     </l-page>

package/dist/runtime/pages/System/setting.vue

@@ -1,6 +1,28 @@
 <script setup>
 import { ref } from 'vue'
-import { q, m, useLight } from '#imports';
+import { q, m, useLight, useRoute } from '#imports';
+import { useQuasar } from 'quasar';
+const route = useRoute()
+const tab = ref('general')
+const $q = useQuasar()
+
+
+if (route.query.mail_driver == 'gmail' && route.query.refresh_token) {
+
+    //save the mail_driver
+    await m("updateAppConfigs", {
+        data: [
+            { name: 'mail_driver', value: 'gmail' },
+            { name: 'mail_google_refresh_token', value: route.query.refresh_token }
+        ]
+    })
+    tab.value = 'mail'
+
+    //remove the query string
+    window.history.replaceState({}, document.title, window.location.pathname);
+
+    $q.notify({ message: "Gmail account added", color: "positive" })
+}
 
 const light = useLight()
 
@@ -12,7 +34,6 @@ const obj = app.config.reduce((acc, cur) => {
 
 obj.revision = obj.revision ? obj.revision.split(',') : []
 
-const tab = ref('general')
 
 const onSubmit = async (d) => {
     let data = [];
@@ -31,6 +52,9 @@ const onSubmit = async (d) => {
         obj[key] = d[key]
     })
 }
+
+
+
 </script>
 <template>
     <l-page>
@@ -50,7 +74,7 @@ const onSubmit = async (d) => {
                 </template>
                 <template #after>
                     <l-system-setting-general v-if="tab == 'general'" v-model="obj" />
-                    <l-system-setting-mail v-if="tab == 'mail'" v-model="obj" />
+                    <l-system-setting-mail v-if="tab == 'mail'" v-bind="obj" @submit="onSubmit" />
                     <l-system-setting-security v-if="tab == 'security'" v-model="obj" />
                     <l-system-setting-modules v-if="tab == 'Modules'" v-model="obj" />
                     <l-system-setting-developer v-if="tab == 'developer'" v-model="obj" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.19.1",
+  "version": "1.19.3",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",