@hostlink/nuxt-light 0.0.117 → 0.0.118

package/dist/module.json

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

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/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": "0.0.118",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",