@hostlink/nuxt-light 0.0.117 → 1.0.1

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.117"
+  "version": "1.0.1"
 }

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

@@ -40,7 +40,7 @@ const attrs = {
 }
 </script>
 <template>
-    <q-input v-bind="attrs" v-model="localValue">
+    <q-input v-bind="attrs" v-model="localValue" hide-bottom-space>
         <q-dialog v-model="show" full-height full-width>
             <l-file-manager closable @close="show = false" @input="onInput"></l-file-manager>
         </q-dialog>

package/dist/runtime/formkit/Form.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue'
 import { useRouter, useRoute } from "vue-router";
-import { Dialog } from "quasar";
+import { Dialog, Notify } from "quasar";
 import { model } from "@hostlink/light"
 
 const route = useRoute();
@@ -40,11 +40,21 @@ if (!props.context.onSubmit) {
         try {
             if (route.params[id_name]) {//edit
                 if (await model(module).update(parseInt(route.params[id_name]), v)) {
+                    Notify.create({
+                        message: "Updated successfully",
+                        color: "positive",
+                        icon: "sym_o_check"
+                    });
                     router.go(-1);
                     return;
                 }
             } else {
                 if (await model(module).add(v)) {
+                    Notify.create({
+                        message: "Added successfully",
+                        color: "positive",
+                        icon: "sym_o_check"
+                    });
                     router.go(-1);
                     return;
                 }
@@ -67,7 +77,7 @@ if (!props.context.onSubmit) {
     <form v-bind="context.attrs">
         <l-card :bordered="bordered">
             <q-card-section>
-                <div :class="`q-gutter-${gutter}`">
+                <div :class="`q-col-gutter-${gutter}`">
                     <slot v-bind="context"></slot>
                 </div>
             </q-card-section>

package/dist/runtime/formkit/Select.vue

@@ -15,9 +15,28 @@ const value = computed({
 const ss = Object.entries(useSlots()).map(([key, value]) => {
     return key;
 });
+
+//check required in parsedRules
+let required = false;
+for (let rule of props.context.node.props.parsedRules ?? []) {
+    if (rule.name === "required") {
+        required = true;
+        break;
+    }
+}
+
+let clearable = false;
+if (required) { //no clearable
+    clearable = false;
+} else {
+    clearable = true;
+}
+
+
 </script>
 <template>
-    <l-select v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :error-message="errorMessage">
+    <l-select v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :error-message="errorMessage"
+        :clearable="clearable">
         <template v-for="s in ss" v-slot:[s]="props" :key="s">
             <slot :name="s" v-bind="props ?? {}"></slot>
         </template>

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

@@ -1,24 +1,34 @@
 <script setup>
-import { reactive } from 'vue'
 import { m } from '../../'
-const obj = reactive({})
+import { Notify } from "quasar"
 
-const onSave = async () => {
-    if (await m("mailTest", obj)) {
-        que.notify({
-            message: "Mail sent",
+const onSubmit = async (data) => {
+    try {
+        await m("mailTest", data)
+
+
+        Notify.create({
+            message: "Email sent",
             color: "positive",
-            icon: "email"
+            icon: "check"
         });
+
+    } catch (e) {
+        Notify.create({
+            message: e.message,
+            color: "negative",
+            icon: "warning"
+        })
     }
 }
 </script>
 <template>
     <l-page>
-        <l-form @save="onSave">
-            <l-input label="Email" v-model="obj.email" required></l-input>
-            <l-input label="Subject" v-model="obj.subject" required></l-input>
-            <l-input type="textarea" label="Content" v-model="obj.content" required></l-input>
-        </l-form>
+        <FormKit type="l-form" @submit="onSubmit">
+            <FormKit type="l-input" label="Email" name="email" validation="required|email"></FormKit>
+            <FormKit type="l-input" label="Subject" name="subject" validation="required"></FormKit>
+            <FormKit type="l-input" input-type="textarea" label="Content" name="content" validation="required">
+            </FormKit>
+        </FormKit>
     </l-page>
 </template>

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

@@ -1,22 +1,17 @@
 <script setup>
-import { useQuasar } from 'quasar'
+import { Notify } from 'quasar'
 import { useRouter } from 'vue-router'
-import { reactive } from "vue"
 import { q, m } from '../../'
 
 const router = useRouter()
-const que = useQuasar()
-
 const { app } = await q({ app: { config: ["name", "value"] } })
-
-//const system = await q("system", ["passwordPolicy"])
-
-const obj = reactive(app.config.reduce((acc, cur) => {
+const obj = app.config.reduce((acc, cur) => {
     acc[cur.name] = cur.value
     return acc
-}, {}));
+}, {});
 
-const fields = ["company", "company_logo", "password_upper_case", "password_lower_case", "password_number", "password_special_character",
+const fields = ["company", "company_logo",
+    "password_upper_case", "password_lower_case", "password_number", "password_special_character",
     "file_manager", "two_factor_authentication"];
 
 //filter out fields that are not in the app.config table
@@ -26,53 +21,53 @@ Object.keys(obj).forEach((key) => {
     }
 })
 
-const onSave = async () => {
-    const data = [];
-    Object.keys(obj).forEach((key) => {
+const onSubmit = async (d, form) => {
+    let data = [];
+    Object.keys(d).forEach((key) => {
         data.push({
             name: key,
-            value: obj[key]
+            value: d[key]
         })
     })
+
     await m("updateAppConfigs", { data })
     //show success
-    que.notify({
-        message: "Saved",
-        type: "positive",
-        position: "top",
-    });
-
+    Notify.create({
+        message: "Settings updated",
+        color: "positive",
+        icon: "check"
+    })
 
-}
+    router.go(-1);
 
 
+}
 </script>
 <template>
     <l-page>
-        <l-form @save="onSave">
-            <l-input label="Company" v-model="obj.company"></l-input>
-            <l-input label="Company logo" v-model="obj.company_logo"></l-input>
+
+        <FormKit type="l-form" :value="obj" #default="{ value }" @submit="onSubmit">
+            <FormKit type="l-input" label="Company" name="company"></FormKit>
+            <FormKit type="l-input" label="Company logo" name="company_logo"></FormKit>
 
             <q-field label="Password policy" stack-label>
-                <q-checkbox label="Upper case" v-model="obj.password_upper_case" true-value="1"
-                    false-value="0"></q-checkbox>
-                <q-checkbox label="Lower case" v-model="obj.password_lower_case" true-value="1"
-                    false-value="0"></q-checkbox>
-                <q-checkbox label="Number" v-model="obj.password_number" true-value="1" false-value="0"></q-checkbox>
-                <q-checkbox label="Special character" v-model="obj.password_special_character" true-value="1"
-                    false-value="0"></q-checkbox>
+                <FormKit type="q-checkbox" label="Upper Case" name="password_upper_case" true-value="1" false-value="0" />
+                <FormKit type="q-checkbox" label="Lower Case" name="password_lower_case" true-value="1" false-value="0" />
+                <FormKit type="q-checkbox" label="Number" name="password_number" true-value="1" false-value="0" />
+                <FormKit type="q-checkbox" label="Special Character" name="password_special_character" true-value="1"
+                    false-value="0" />
             </q-field>
 
 
             <q-field label="File manager" stack-label>
-                <q-checkbox label="Show" v-model="obj.file_manager" true-value="1" false-value="0"></q-checkbox>
+                <FormKit type="q-checkbox" label="Show" name="file_manager" true-value="1" false-value="0" />
             </q-field>
 
             <q-field label="Two factor authentication" stack-label>
-                <q-checkbox label="Enable" v-model="obj.two_factor_authentication" true-value="1"
-                    false-value="0"></q-checkbox>
+                <FormKit type="q-checkbox" label="Enable" name="two_factor_authentication" true-value="1" false-value="0" />
             </q-field>
 
-        </l-form>
+
+        </FormKit>
     </l-page>
 </template>

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

@@ -4,44 +4,50 @@ import { getObject } from '../../../'
 const obj = reactive(await getObject(["username", "first_name", "last_name", "email", "phone",
     "addr1", "addr2", "addr3", "join_date", "expiry_date", "status", "language", "default_page"
 ]))
+
+const options = [
+    { label: 'Active', value: 0 },
+    { label: 'Inactive', value: 1 }
+];
+
+const languages = [
+    { label: 'English', value: 'en' },
+    { label: '中文', value: 'zh-hk' }
+]
+
+
 </script>
 
 <template>
     <l-page>
-        <l-form v-model="obj" gutter="none">
+        <FormKit type="l-form" :value="obj">
             <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" />
+                    <FormKit type="l-input" label="Username" name="username" validation="required" />
+                    <FormKit type="l-input" label="First name" name="first_name" validation="required" />
+                    <FormKit type="l-input" label="Last name" name="last_name" />
+                    <FormKit type="l-input" label="Email" name="email" validation="required|email" />
                 </l-col>
+
                 <l-col md="6" gutter="md">
-                    <l-input label="Phone" v-model="obj.phone" />
-                    <l-input label="Address1" v-model="obj.addr1" />
-                    <l-input label="Address2" v-model="obj.addr2" />
-                    <l-input label="Address3" v-model="obj.addr3" />
+                    <FormKit type="l-input" label="Phone" name="phone" />
+                    <FormKit type="l-input" label="Address1" name="addr1" />
+                    <FormKit type="l-input" label="Address2" name="addr2" />
+                    <FormKit type="l-input" label="Address3" name="addr3" />
                 </l-col>
-                <l-col gutter="md">
-                    <l-date-picker label="Join date" v-model="obj.join_date" required />
-                    <l-date-picker label="Expiry date" v-model="obj.expiry_date" />
 
-                    <l-select label="Status" :options="[{ value: 0, label: 'Active' }, { value: 1, label: 'Inactive' }]"
-                        v-model="obj.status" required></l-select>
+                <l-col gutter="md">
+                    <FormKit type="l-date-picker" label="Join date" name="join_date" validation="required" />
+                    <FormKit type="l-date-picker" label="Expiry date" name="expiry_date" />
+                    <FormKit type="l-select" label="Status" name="status" :options="options" validation="required" />
+                    <FormKit type="l-select" label="Language" name="language" :options="languages" validation="required" />
+                    <FormKit type="l-input" label="Default page" name="default_page" />
 
-                    <l-select label="Language" :options="[{
-                        label: 'English',
-                        value: 'en'
-                    }, {
-                        label: '中文',
-                        value: 'zh-hk'
-                    }]" v-model="obj.language" required></l-select>
+                </l-col>
+            </l-row>
 
-                    <l-input label="Default page" v-model="obj.default_page"></l-input>
+        </FormKit>
 
 
-                </l-col>
-            </l-row>
-        </l-form>
     </l-page>
 </template>

package/dist/runtime/pages/User/add.vue

@@ -48,18 +48,11 @@ const languages = [
     { label: '中文', value: 'zh-hk' }
 ]
 
-const onSubmit = async (data) => {
-    return model("User").add(data).then((res) => {
-        router.push("/User");
-    }).catch((err) => {
-        console.log(err)
-    })
-}
 
 </script>
 <template>
     <l-page>
-        <FormKit type="l-form" :value="obj" @submit="onSubmit">
+        <FormKit type="l-form" :value="obj">
             <l-row>
                 <l-col md="6" gutter="md">
                     <FormKit type="l-input" label="Username" name="username" validation="required" />

package/package.json

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