@hostlink/nuxt-light 0.0.116 → 0.0.118

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.116"
+  "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/formkit/index.mjs

@@ -65,6 +65,7 @@ export const createLightPlugin = () => {
           type: "group",
           component: FormVue,
           props: [
+            "actions",
             "submitLabel",
             "submit",
             "actions",

package/dist/runtime/pages/SystemValue/_systemvalue_id/edit.vue

@@ -1,15 +1,13 @@
 <script setup>
-import { reactive } from 'vue'
-import { getObject } from '../../../'
-const obj = reactive(await getObject(["name", "value"]))
+import { getObject } from '#imports'
+const obj = await getObject(["name", "value"])
 </script>
 
 <template>
     <l-page>
-        <l-form v-model="obj">
-            <l-input label="Name" v-model="obj.name" required />
-            <l-input label="Value" v-model="obj.value" required type="textarea" />
-        </l-form>
-
+        <FormKit type="l-form" :value="obj">
+            <FormKit type="l-input" label="Name" name="name" validation="required" />
+            <FormKit type="l-input" label="Value" name="value" validation="required" input-type="textarea" />
+        </FormKit>
     </l-page>
 </template>

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

@@ -1,15 +1,8 @@
-<script setup>
-import { reactive } from 'vue'
-
-const obj = reactive({})
-</script>
-
 <template>
     <l-page>
-        <l-form v-model="obj">
-            <l-input label="Name" v-model="obj.name" required />
-            <l-input label="Value" v-model="obj.value" required type="textarea" />
-        </l-form>
-
+        <FormKit type="l-form">
+            <FormKit type="l-input" label="Name" name="name" validation="required" />
+            <FormKit type="l-input" label="Value" name="value" validation="required" input-type="textarea" />
+        </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/dist/runtime/pages/User/profile.vue

@@ -48,8 +48,8 @@ eventLogCols.forEach(col => {
 <template>
     <l-page title="User profile">
         <template #header>
-            <l-btn icon="sym_o_key" to="update-password" label="Update password" />
-            <l-btn icon="sym_o_key" to="two-factor-auth" label="Two factor auth" />
+            <l-btn icon="sym_o_password" to="setting/password" label="Update password" />
+            <l-btn icon="sym_o_key" to="setting/two-factor-auth" label="Two factor auth" />
         </template>
         <div class="q-gutter-md q-mt-md">
             <l-card>

package/dist/runtime/routes.mjs

@@ -151,11 +151,6 @@ function User_setting_two_factor_auth() {
     /* webpackChunkName: "User-setting-two-factor-auth" */ './pages/User/setting/two-factor-auth.vue'
   )
 }
-function User_update_password() {
-  return import(
-    /* webpackChunkName: "User-update-password" */ './pages/User/update-password.vue'
-  )
-}
 function System_database_backup() {
   return import(
     /* webpackChunkName: "System-database-backup" */ './pages/System/database/backup.vue'
@@ -369,11 +364,6 @@ export default [
       },
     ],
   },
-  {
-    name: 'User-update-password',
-    path: '/User/update-password',
-    component: User_update_password,
-  },
   {
     name: 'System-database-backup',
     path: '/System/database/backup',

package/package.json

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

package/dist/runtime/pages/User/update-password.vue

@@ -1,44 +0,0 @@
-<script setup>
-import { useQuasar } from 'quasar';
-import { updatePassword } from '@hostlink/light';
-
-const obj = reactive({
-    old_password: "",
-    new_password: "",
-    confirm_password: ""
-})
-
-const qua = useQuasar();
-const router = useRouter();
-
-const onSave = async () => {
-    if (await updatePassword(obj.old_password, obj.new_password)) {
-        //back
-        router.back();
-    } else {
-        //show error
-        qua.notify({
-            message: "Invalid old password",
-            color: "negative",
-            icon: "sym_o_error",
-            position: "top",
-            timeout: 2000
-        });
-    }
-}
-
-</script>
-<template>
-    <l-page>
-        <l-form @save="onSave">
-            <l-input label="Old password" v-model="obj.old_password" type="password"
-                :rules="[v => !!v || 'Old password is required']" />
-            <l-input label="New password" v-model="obj.new_password" type="password"
-                :rules="[v => !!v || 'New password is required']" />
-            <l-input label="Confirm password" v-model="obj.confirm_password" type="password" :rules="[
-                v => !!v || 'Confirm password is required',
-                v => v == obj.new_password || 'Confirm password does not match'
-            ]" />
-        </l-form>
-    </l-page>
-</template>