@hostlink/nuxt-light 0.0.114 → 0.0.115

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.114"
+  "version": "0.0.115"
 }

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

@@ -1,5 +1,9 @@
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, useAttrs } from "vue";
+import { useLight } from '../';
+
+const light = useLight();
+
 const props = defineProps({
     modelValue: {
         type: String
@@ -21,9 +25,22 @@ const localValue = computed({
     set: (value) => emit("update:modelValue", value),
 })
 
+const attrs = {
+
+    ...{
+        filled: light.getStyle("inputFilled"),
+        outlined: light.getStyle("inputOutlined"),
+        standout: light.getStyle("inputStandout"),
+        rounded: light.getStyle("inputRounded"),
+        dense: light.getStyle("inputDense"),
+        square: light.getStyle("inputSquare"),
+        stackLabel: light.getStyle("inputStackLabel")
+    },
+    ...useAttrs(),
+}
 </script>
 <template>
-    <q-input v-model="localValue">
+    <q-input v-bind="attrs" v-model="localValue">
         <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/components/l-input.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, useAttrs } from "vue";
+import { computed, ref, useAttrs, useSlots } from "vue";
 import { useI18n } from 'vue-i18n';
 import tc2sc from "../lib/tc2sc";
 import { useLight } from '../';
@@ -164,12 +164,17 @@ const attrs = {
     },
     ...useAttrs(),
 }
+
+const ss = Object.entries(useSlots()).map(([key, value]) => {
+    return key;
+});
+
 </script>
 <template>
     <q-input v-bind="attrs" :label="localLabel" v-model="localValue" :rules="new_rules" hide-bottom-space :type="localType">
         <template v-if="translate" #prepend>
             <q-btn icon="sym_o_translate" flat dense rounded>
-                <q-menu dens>
+                <q-menu dense>
                     <q-list>
                         <q-item clickable v-close-popup @click="onClickTc2Sc">
                             <q-item-section>繁轉簡</q-item-section>
@@ -177,7 +182,10 @@ const attrs = {
                     </q-list>
                 </q-menu>
             </q-btn>
+        </template>
 
+        <template v-for="s in ss" v-slot:[s]="props" :key="s">
+            <slot :name="s" v-bind="props ?? {}"></slot>
         </template>
 
         <template v-if="localShowPassword" v-slot:append>

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

@@ -618,25 +618,25 @@ const getCellClass = (col: any, row: any) => {
                     <template v-if="col.searchable">
 
                         <template v-if="col.searchType == 'number'">
-                            <q-input dense clearable v-model.number="filters[col.name]" @keydown.enter.prevent="onFilters"
-                                @clear="onFilters" mask="##########"></q-input>
+                            <q-input dense clearable filled square v-model.number="filters[col.name]"
+                                @keydown.enter.prevent="onFilters" @clear="onFilters" mask="##########"></q-input>
                         </template>
 
                         <template v-if="col.searchType == 'select'">
-                            <q-select dense v-model="filters[col.name]" @update:model-value="onFilters" clearable
-                                options-dense :options="col.searchOptions" emit-value map-options
-                                :multiple="col.searchMultiple" />
+                            <q-select dense clearable filled square v-model="filters[col.name]"
+                                @update:model-value="onFilters" options-dense :options="col.searchOptions" emit-value
+                                map-options :multiple="col.searchMultiple" />
 
                         </template>
 
                         <template v-if="col.searchType == 'date'">
-                            <l-date-picker :outlined="false" hide-bottom-space v-model="filters[col.name]" dense
-                                @update:model-value="onFilters" clearable range @clear="onFilters" />
+                            <l-date-picker dense clearable filled square :outlined="false" hide-bottom-space
+                                v-model="filters[col.name]" @update:model-value="onFilters" range @clear="onFilters" />
                         </template>
 
                         <template v-if="!col.searchType">
-                            <q-input dense clearable v-model="filters[col.name]" @keydown.enter.prevent="onFilters"
-                                @clear="onFilters" enterkeyhint="search"></q-input>
+                            <q-input dense clearable filled square v-model="filters[col.name]"
+                                @keydown.enter.prevent="onFilters" @clear="onFilters" enterkeyhint="search"></q-input>
 
                         </template>
 

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

@@ -1,5 +1,8 @@
 <script setup>
-import { computed, ref } from "vue";
+import { computed, ref, useAttrs } from "vue";
+import { useLight } from '../';
+const light = useLight();
+
 const props = defineProps({
     modelValue: {
         type: [String, Object],
@@ -35,11 +38,23 @@ if (props.required) {
 }
 
 
+const attrs = {
+    ...{
+        filled: light.getStyle("inputFilled"),
+        outlined: light.getStyle("inputOutlined"),
+        standout: light.getStyle("inputStandout"),
+        rounded: light.getStyle("inputRounded"),
+        dense: light.getStyle("inputDense"),
+        square: light.getStyle("inputSquare"),
+        stackLabel: light.getStyle("inputStackLabel")
+    },
+    ...useAttrs(),
+}
 
 
 </script>
 <template>
-    <q-input v-model="localValue" mask="time" :rules="rules" :label="$t(label)" :hint="$t(hint)">
+    <q-input v-bind="attrs" v-model="localValue" mask="time" :rules="rules" :label="$t(label)" :hint="$t(hint)">
         <template v-slot:prepend>
             <q-btn icon="sym_o_access_time" round dense flat>
                 <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">

package/dist/runtime/formkit/Checkbox.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { getErrorMessage } from 'formkit-quasar';
+import { computed, useSlots } from 'vue'
+const props = defineProps({
+    context: Object
+});
+
+const value = computed({
+    get: () => props.context.value,
+    set: (val) => props.context.node.input(val)
+})
+
+const ss = Object.entries(useSlots()).map(([key, value]) => {
+    return key;
+});
+
+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">
+        <template v-for="s in ss" v-slot:[s]="props" :key="s">
+            <slot :name="s" v-bind="props ?? {}"></slot>
+        </template>
+    </l-checkbox>
+</template>

package/dist/runtime/formkit/DatePicker.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { computed, useSlots } from 'vue'
+import { getErrorMessage } from 'formkit-quasar';
+
+const props = defineProps({
+    context: Object
+});
+
+const { error, errorMessage } = getErrorMessage(props.context.node);
+
+const value = computed({
+    get: () => props.context.value,
+    set: (val) => props.context.node.input(val)
+})
+
+const ss = Object.entries(useSlots()).map(([key]) => key);
+</script>
+<template>
+    <l-date-picker v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
+        :error-message="errorMessage">
+        <template v-for="s in ss" v-slot:[s]="props" :key="s">
+            <slot :name="s" v-bind="props ?? {}"></slot>
+        </template>
+    </l-date-picker>
+</template>

package/dist/runtime/formkit/FilePicker.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { computed, useSlots } from 'vue'
+import { getErrorMessage } from 'formkit-quasar';
+
+const props = defineProps({
+    context: Object
+});
+
+const { error, errorMessage } = getErrorMessage(props.context.node);
+
+const value = computed({
+    get: () => props.context.value,
+    set: (val) => props.context.node.input(val)
+})
+
+const ss = Object.entries(useSlots()).map(([key]) => key);
+
+const onBlur = () => {
+    if (errorMessage.value) {
+        error.value = true
+    } else {
+        error.value = false
+    }
+}
+</script>
+<template>
+    <l-file v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
+        :error-message="errorMessage" @blur="onBlur">
+        <template v-for="s in ss" v-slot:[s]="props" :key="s">
+            <slot :name="s" v-bind="props ?? {}"></slot>
+        </template>
+    </l-file>
+</template>

package/dist/runtime/formkit/Form.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { ref } from 'vue'
+import { useRouter, useRoute } from "vue-router";
+import { Dialog } from "quasar";
+import { model } from "@hostlink/light"
+
+const route = useRoute();
+const router = useRouter();
+
+let props = defineProps({
+    context: Object
+});
+
+let onSubmit = async () => {
+    props.context.handlers.submit(new Event("submit"));
+}
+
+const gutter = props.gutter ?? "md";
+
+//check bordered is undefined
+let bordered = true;
+if (props.context.bordered !== undefined) {
+    bordered = props.context.bordered;
+}
+const loading = ref(false);
+if (!props.context.onSubmit) {
+    props.context.node.props.onSubmit = async function () {
+        loading.value = true;
+        const [module, id_name] = route.name.split("-");
+
+        try {
+            if (route.params[id_name]) {//edit
+                if (await model(module).update(parseInt(route.params[id_name]), props.context.value)) {
+                    router.go(-1);
+                    return;
+                }
+            } else {
+                if (await model(module).add(props.context.value)) {
+                    router.go(-1);
+                    return;
+                }
+            }
+        } catch (e) {
+            Dialog.create({
+                title: "Error",
+                message: e.message,
+                ok: "OK"
+            });
+        }
+        loading.value = false;
+    }
+
+}
+
+
+</script>
+<template>
+    <form v-bind="context.attrs">
+        <l-card :bordered="bordered">
+            <q-card-section>
+                <div :class="`q-gutter-${gutter}`">
+                    <slot v-bind="context"></slot>
+                </div>
+            </q-card-section>
+
+            <q-card-actions align="right">
+                <l-btn color="primary" icon="sym_o_check" label="Submit" @click="onSubmit" :disabled="!context.state.dirty"
+                    :loading="loading"></l-btn>
+            </q-card-actions>
+        </l-card>
+    </form>
+</template>

package/dist/runtime/formkit/Input.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { computed, useSlots } from 'vue'
+import { getErrorMessage } from 'formkit-quasar';
+
+const props = defineProps({
+    context: Object
+});
+
+const { error, errorMessage } = getErrorMessage(props.context.node);
+
+const value = computed({
+    get: () => props.context.value,
+    set: (val) => props.context.node.input(val)
+})
+
+const ss = Object.entries(useSlots()).map(([key]) => key);
+
+const onBlur = () => {
+    if (errorMessage.value) {
+        error.value = true
+    } else {
+        error.value = false
+    }
+}
+
+
+</script>
+<template>
+    <l-input v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
+        :error-message="errorMessage" @blur="onBlur">
+        <template v-for="s in ss" v-slot:[s]="props" :key="s">
+            <slot :name="s" v-bind="props ?? {}"></slot>
+        </template>
+    </l-input>
+</template>

package/dist/runtime/formkit/OptionGroup.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { computed } from 'vue'
+import { getErrorMessage } from 'formkit-quasar';
+
+const props = defineProps({
+    context: Object
+});
+
+const { error, errorMessage } = getErrorMessage(props.context.node);
+
+const value = computed({
+    get: () => props.context.value,
+    set: (val) => props.context.node.input(val)
+})
+
+</script>
+<template>
+    <l-field label="Roles" stack-label :label="context.label" :error="error" :error-message="errorMessage">
+        <q-option-group type="checkbox" :options="context.options" v-model="value" inline v-bind="context.attrs">
+        </q-option-group>
+    </l-field>
+</template>

package/dist/runtime/formkit/Radio.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { computed } from 'vue'
+import { getErrorMessage } from 'formkit-quasar';
+
+const props = defineProps({
+    context: Object
+});
+
+const { error, errorMessage } = getErrorMessage(props.context.node);
+
+const value = computed({
+    get: () => props.context.value,
+    set: (val) => props.context.node.input(val)
+})
+
+</script>
+<template>
+    <q-radio v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
+        :error-message="errorMessage">
+        <slot></slot>
+    </q-radio>
+</template>

package/dist/runtime/formkit/Repeater.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+    context: Object
+});
+
+const node = props.context.node;
+const min = props.context.node.props.min ?? 1;
+const max = props.context.node.props.max ?? Infinity;
+
+const localValue = ref(props.context.value)
+
+if (localValue.value.length < min) {
+    for (let i = localValue.value.length; i < min; i++) {
+        localValue.value.push({})
+    }
+}
+
+if (localValue.value.length > max) {
+    localValue.value = localValue.value.slice(0, max)
+}
+
+const onAdd = () => {
+    if (localValue.value.length >= max) return;
+    localValue.value.push({})
+}
+
+const onRemove = (index) => {
+    if (localValue.value.length <= min) return;
+    localValue.value.splice(index, 1)
+}
+
+const onMoveUp = (index) => {
+    if (index > 0) {
+        let temp = localValue.value[index - 1]
+        localValue.value[index - 1] = localValue.value[index]
+        localValue.value[index] = temp
+    }
+}
+
+const onMoveDown = (index) => {
+    if (index < localValue.value.length - 1) {
+        let temp = localValue.value[index + 1]
+        localValue.value[index + 1] = localValue.value[index]
+        localValue.value[index] = temp
+    }
+}
+
+const isAllowRemove = computed(() => {
+    return localValue.value.length > min
+})
+
+const isAllowMoveUp = (index) => {
+    return index > 0
+}
+
+const isAllowMoveDown = (index) => {
+    return index < localValue.value.length - 1
+}
+
+
+
+</script>
+
+<template>
+    <FormKit type="list" v-model="localValue" dynamic #default="{ items, node, value }">
+
+        <FormKit type="group" v-for="(item, index) in  items " :index="index" :key="item">
+
+            <q-card class="q-mb-sm" flat>
+                <q-card-section>
+                    <div class="row q-col-gutter-md">
+
+                        <div class="col-shrink">
+                            <div class="q-mb-sm">
+                                <!-- up -->
+                                <q-btn type="button" @click="onMoveUp(index)" icon="sym_o_arrow_upward" color="primary"
+                                    dense unelevated :disable="!isAllowMoveUp(index)"/>
+                            </div>
+
+                            <div class="q-mb-sm">
+                                <q-btn type="button" @click="onRemove" icon="sym_o_remove" color="primary" dense unelevated
+                                    :disable="!isAllowRemove" />
+                            </div>
+
+
+                            <div class="q-mb-sm">
+                                <!-- down -->
+                                <q-btn type="button" @click="onMoveDown(index)" icon="sym_o_arrow_downward" color="primary"
+                                    dense unelevated :disable="!isAllowMoveDown(index)"/>
+                            </div>
+
+                        </div>
+
+                        <div class="col">
+                            <slot></slot>
+                        </div>
+                    </div>
+                </q-card-section>
+            </q-card>
+        </FormKit>
+
+        <q-btn color="primary" @click="onAdd" icon="sym_o_add" label="Add" :disable="localValue.length >= max"
+            unelevated></q-btn>
+    </FormKit>
+</template>

package/dist/runtime/formkit/Select.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { getErrorMessage } from 'formkit-quasar';
+import { computed, useSlots } from 'vue'
+const props = defineProps({
+    context: Object
+});
+
+const { error, errorMessage } = getErrorMessage(props.context.node);
+
+const value = computed({
+    get: () => props.context.value,
+    set: (val) => props.context.node.input(val)
+})
+
+const ss = Object.entries(useSlots()).map(([key, value]) => {
+    return key;
+});
+</script>
+<template>
+    <l-select v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :error-message="errorMessage">
+        <template v-for="s in ss" v-slot:[s]="props" :key="s">
+            <slot :name="s" v-bind="props ?? {}"></slot>
+        </template>
+    </l-select>
+</template>

package/dist/runtime/formkit/TimePicker.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { computed, useSlots } from 'vue'
+import { getErrorMessage } from 'formkit-quasar';
+
+const props = defineProps({
+    context: Object
+});
+
+const { error, errorMessage } = getErrorMessage(props.context.node);
+
+const value = computed({
+    get: () => props.context.value,
+    set: (val) => props.context.node.input(val)
+})
+
+const ss = Object.entries(useSlots()).map(([key]) => key);
+</script>
+<template>
+    <l-time-picker v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
+        :error-message="errorMessage">
+        <template v-for="s in ss" v-slot:[s]="props" :key="s">
+            <slot :name="s" v-bind="props ?? {}"></slot>
+        </template>
+    </l-time-picker>
+</template>

package/dist/runtime/formkit/index.d.ts

@@ -0,0 +1,2 @@
+import type { FormKitPlugin } from '@formkit/core';
+export declare const createLightPlugin: () => FormKitPlugin;

package/dist/runtime/formkit/index.mjs

@@ -0,0 +1,79 @@
+import { forms, disablesChildren } from "@formkit/inputs";
+import Input from "./Input.vue";
+import SelectVue from "./Select.vue";
+import RepeaterVue from "./Repeater.vue";
+import FormVue from "./Form.vue";
+import CheckboxVue from "./Checkbox.vue";
+import RadioVue from "./Radio.vue";
+import DatePickerVue from "./DatePicker.vue";
+import TimePickerVue from "./TimePicker.vue";
+import OptionGroupVue from "./OptionGroup.vue";
+import FilePickerVue from "./FilePicker.vue";
+export const createLightPlugin = () => {
+  return (node) => {
+    let type = node.props.type + "";
+    switch (type) {
+      case "l-file-picker":
+        return node.define({
+          type: "input",
+          component: FilePickerVue
+        });
+      case "l-option-group":
+        return node.define({
+          type: "input",
+          component: OptionGroupVue
+        });
+      case "l-time-picker":
+        return node.define({
+          type: "input",
+          component: TimePickerVue
+        });
+      case "l-date-picker":
+        return node.define({
+          type: "input",
+          component: DatePickerVue
+        });
+      case "l-radio":
+        return node.define({
+          type: "input",
+          component: RadioVue
+        });
+      case "l-checkbox":
+        return node.define({
+          type: "input",
+          component: CheckboxVue
+        });
+      case "l-input":
+        return node.define({
+          type: "input",
+          props: ["inputType"],
+          component: Input
+        });
+      case "l-select":
+        return node.define({
+          type: "input",
+          component: SelectVue
+        });
+      case "l-repeater":
+        return node.define({
+          type: "list",
+          props: ["min", "max"],
+          component: RepeaterVue
+        });
+      case "l-form":
+        return node.define({
+          type: "group",
+          component: FormVue,
+          props: [
+            "submitLabel",
+            "submit",
+            "actions",
+            "onSubmit",
+            "gutter",
+            "bordered"
+          ],
+          features: [forms, disablesChildren]
+        });
+    }
+  };
+};

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

@@ -1,9 +1,5 @@
 <script setup>
-import { reactive } from 'vue'
 import { q } from '../../'
-const obj = reactive({
-    childs: ["Users"],
-})
 
 let roles = await q("listRole", ["name"]);
 roles = roles.map((role) => {
@@ -13,18 +9,18 @@ roles = roles.map((role) => {
     };
 });
 
+const onSubmit = (e) => {
+    e.preventDefault();
+    console.log("submit");
+}
 </script>
 
 <template>
     <l-page>
-        <l-form v-model="obj">
-            <l-input v-model="obj.name" label="Name" required />
-            <q-field label="Child" stack-label>
-                <q-option-group type="checkbox" :options="roles" v-model="obj.childs" inline>
-                </q-option-group>
-            </q-field>
-
-        </l-form>
+        <FormKit type="l-form" :value="{ childs: ['Users'] }"  >
+            <FormKit type="l-input" name="name" label="Name" validation="required" />
+            <FormKit type="l-option-group" :options="roles" name="childs" label="Child" />
+        </FormKit>
 
     </l-page>
 </template>

package/dist/runtime/pages/User/_user_id/change-password.vue

@@ -1,31 +1,23 @@
 <script setup>
 import { q, m } from '../../../'
-import { useRouter, useRoute } from "vue-router"
-import { reactive } from "vue"
+import { useRouter } from "vue-router"
 const system = await q("system", ["passwordPolicy"]);
 const router = useRouter();
-const route = useRoute();
 
-const obj = reactive({
-    password: "",
-});
-
-const onUpdatePassword = async () => {
-    if (await m("updateUserPassword", {
+const onSubmit = async (data, form) => {
+    return await m("updateUserPassword", {
         id: route.params.user_id,
-        password: obj.password
-    })) {
+        password: data.password
+    }).then(() => {
         router.push("/User");
-    }
+    });
 }
 
 </script>
 <template>
     <l-page>
-        <l-form @save="onUpdatePassword">
-            <l-input type="password" label="New password" v-model="obj.password" :rules="system.passwordPolicy">
-            </l-input>
-        </l-form>
-
+        <FormKit type="l-form" @submit="onSubmit">
+            <FormKit type="l-input" name="password" :validation="system.passwordPolicy" label="Password" input-type="password"></FormKit>
+        </FormKit>
     </l-page>
 </template>

package/dist/runtime/pages/User/_user_id/update-role.vue

@@ -18,11 +18,11 @@ roles = roles.map((role) => {
     };
 });
 
-const submit = async () => {
+const submit = async (data, form) => {
 
     if (await m("updateUserRole", {
         user_id: obj.user_id,
-        roles: obj.roles
+        roles: data.roles
     })) {
         //show success message
 
@@ -41,12 +41,11 @@ const submit = async () => {
 </script>
 <template>
     <l-page>
-        <l-form @submit="submit">
-            <l-field label="Roles" stack-label>
-                <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline>
-                </q-option-group>
-            </l-field>
-        </l-form>
+        <FormKit type="l-form" @submit="submit" :value="{ roles: obj.roles }">
+            <FormKit type="l-option-group" :options="roles" name="roles">
+            </FormKit>
+        </FormKit>
+
 
     </l-page>
 </template>

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

@@ -1,71 +1,94 @@
 <script setup>
 import { reactive } from "vue"
+import { useRouter } from "vue-router";
+import { model } from "@hostlink/light";
 import { q } from '../../'
+const router = useRouter()
 const obj = reactive({
-    roles: ['Users'],
+    username: null,
+    password: null,
+    first_name: null,
+    last_name: null,
+    email: null,
+    phone: null,
+    addr1: null,
+    addr2: null,
+    addr3: null,
+    join_date: new Date().toISOString().substring(0, 10),    //YYYY-MM-DD (today)
+    expiry_date: null,
     status: 0,
     language: "en",
-    //YYYY-MM-DD (today)
-    join_date: new Date().toISOString().substring(0, 10),
-
+    default_page: null,
+    roles: ['Users'],
 })
 
-let roles = await q("listRole", ["name"]);
-roles = roles.map((role) => {
+let { system, listRole } = await q({
+    system: {
+        passwordPolicy: true,
+    },
+    listRole: {
+        name: true,
+    }
+})
+const roles = listRole.map((role) => {
     return {
         label: role.name,
         value: role.name,
     };
 });
 
-const system = await q("system", ["passwordPolicy"]);
+
+const options = [
+    { label: 'Active', value: 0 },
+    { label: 'Inactive', value: 1 }
+];
+
+const languages = [
+    { label: 'English', value: 'en' },
+    { 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>
-        <l-form v-model="obj" gutter="none">
+        <FormKit type="l-form" :value="obj" @submit="onSubmit">
             <l-row>
                 <l-col md="6" gutter="md">
-                    <l-input label="Username" v-model="obj.username" required />
-                    <l-input label="Password" v-model="obj.password" required type="password"
-                        :rules="system.passwordPolicy" />
-                    <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="Password" name="password" :validation="system.passwordPolicy"
+                        input-type="password" />
+                    <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="[{
-                        label: 'Active',
-                        value: 0
-                    }, {
-                        label: 'Inactive',
-                        value: 1
-                    }]" v-model="obj.status" required></l-select>
-
-                    <l-select label="Language" :options="[{
-                        label: 'English',
-                        value: 'en'
-                    }, {
-                        label: '中文',
-                        value: 'zh-hk'
-                    }]" v-model="obj.language" emit-value map-options required></l-select>
 
-                    <l-input label="Default page" v-model="obj.default_page"></l-input>
+                <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-field label="Roles" stack-label>
-                        <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline>
-                        </q-option-group>
-                    </l-field>
+                    <FormKit type="l-option-group" label="Roles" name="roles" :options="roles ?? []" />
                 </l-col>
             </l-row>
-        </l-form>
+
+        </FormKit>
+
     </l-page>
 </template>

package/dist/runtime/pages/User/setting/index.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { reactive } from "vue"
+import { reset } from "@formkit/core"
 import { q, m, notify } from '../../../'
 
 const obj = reactive(await q("my", ["username", "email", "first_name", "last_name"]))
@@ -18,16 +19,25 @@ const save = async () => {
     } catch (e) {
         notify(e.message, "red")
     }
-
-
-
+}
+const onSubmit = async (data, form) => {
+    return await m("updateMy", {
+        data: {
+            email: data.email,
+            first_name: data.first_name,
+            last_name: data.last_name
+        }
+    }).then(() => {
+        notify("Your profile has been updated")
+        reset(form, data)
+    });
 }
 </script>
 <template>
-    <l-form @save="save" :bordered="false">
-        <l-input label="Username" v-model="obj.username" readonly></l-input>
-        <l-input label="Email" v-model="obj.email" required></l-input>
-        <l-input label="First name" v-model="obj.first_name" required></l-input>
-        <l-input label="Last name" v-model="obj.last_name"></l-input>
-    </l-form>
+    <FormKit type="l-form" :value="obj" :bordered="false" @submit="onSubmit">
+        <FormKit type="l-input" label="Username" name="username" readonly></FormKit>
+        <FormKit type="l-input" label="Email" name="email" validation="required|email"></FormKit>
+        <FormKit type="l-input" label="First name" name="first_name" validation="required"></FormKit>
+        <FormKit type="l-input" label="Last name" name="last_name"></FormKit>
+    </FormKit>
 </template>

package/dist/runtime/pages/User/setting/information.vue

@@ -1,25 +1,26 @@
 <script setup>
-import { reactive } from "vue"
+import { reset } from "@formkit/core"
 import { q, m, notify } from '../../../'
-const obj = reactive(await q("my", ["phone", "addr1", "addr2", "addr3"]))
-const save = async () => {
-    try {
-        await m("updateMy", {
-            data: obj
-        });
+const obj = await q("my", ["phone", "addr1", "addr2", "addr3"])
+const onSubmit = (data, form) => {
+    return m("updateMy", {
+        data: {
+            phone: data.phone,
+            addr1: data.addr1,
+            addr2: data.addr2,
+            addr3: data.addr3
+        }
+    }).then(() => {
         notify("Your information has been updated")
-
-    } catch (e) {
-        notify(e.message, "red")
-    }
+        reset(form, data)
+    });
 }
 </script>
 <template>
-    <l-form @save="save" :bordered="false">
-        <l-input label="Phone" v-model="obj.phone"></l-input>
-        <l-input label="Address1" v-model="obj.addr1"></l-input>
-        <l-input label="Address2" v-model="obj.addr2"></l-input>
-        <l-input label="Address3" v-model="obj.addr3"></l-input>
-
-    </l-form>
+    <FormKit type="l-form" :value="obj" :bordered="false" @submit="onSubmit">
+        <FormKit type="l-input" label="Phone" name="phone"></FormKit>
+        <FormKit type="l-input" label="Address1" name="addr1"></FormKit>
+        <FormKit type="l-input" label="Address2" name="addr2"></FormKit>
+        <FormKit type="l-input" label="Address3" name="addr3"></FormKit>
+    </FormKit>
 </template>

package/dist/runtime/pages/User/setting/open_id.vue

@@ -76,7 +76,10 @@ const unlink = async () => {
 
 
 
-                <l-btn label="Unlink" @click="unlink" icon="sym_o_delete"></l-btn>
+                <div>
+                    <l-btn label="Unlink" @click="unlink" icon="sym_o_delete"></l-btn>
+                </div>
+                
             </q-card-section>
 
             <q-card-section v-else>

package/dist/runtime/pages/User/setting/password.vue

@@ -1,21 +1,28 @@
 <script setup>
-import { reactive } from "vue"
-import { notify } from '../../../'
+
+import { Dialog } from 'quasar';
+import { reset } from "@formkit/core"
 import { updatePassword } from "@hostlink/light"
 
 import { q } from "#imports"
 
-const obj = reactive({
-    old_password: "",
-    new_password: "",
-    confirm_password: ""
-})
+const onSubmit = async (data, form) => {
+    if (await updatePassword(data.old_password, data.new_password)) {
+        reset(form);
+        await Dialog.create({
+            title: "Password updated",
+            message: "Your password has been updated",
+            ok: "OK"
+        })
 
-const onSave = async () => {
-    if (await updatePassword(obj.old_password, obj.new_password)) {
-        notify("Your password has been updated")
     } else {
-        notify("Old password is incorrect", "red")
+        await Dialog.create({
+            title: "Error",
+            message: "Old password is incorrect",
+            ok: "OK"
+        })
+
+
     }
 }
 
@@ -23,20 +30,16 @@ const system = await q("system", ["passwordPolicy"])
 
 </script>
 <template>
-    <l-form @save="onSave" :bordered="false">
-        <l-input label="Old password" v-model="obj.old_password" type="password" required />
-        <l-input label="New password" v-model="obj.new_password" type="password" :rules="system.passwordPolicy" />
-        <l-input label="Confirm password" v-model="obj.confirm_password" type="password" :rules="[
-            v => v == obj.new_password || 'Confirm password does not match'
-        ]" />
-    </l-form>
+    <FormKit type="l-form" :bordered="false" @submit="onSubmit">
+        <FormKit type="l-input" label="Old password" name="old_password" inputType="password" validation="required" />
+        <FormKit type="l-input" label="New password" name="new_password" inputType="password"
+            :validation="system.passwordPolicy" />
+        <FormKit type="l-input" label="Confirm password" name="new_password_confirm" inputType="password"
+            validation="required|confirm" />
+    </FormKit>
 
     <div>
         <div>Password policy</div>
-        <ul>
-            <li v-for="rule in system.passwordPolicy" :key="rule">
-                {{ rule }}
-            </li>
-        </ul>
+        <div>{{ system.passwordPolicy }}</div>
     </div>
 </template>

package/dist/runtime/pages/User/setting/style.vue

@@ -47,8 +47,8 @@ const setDefault = async () => {
     styles.cardBordered = true;
     styles.cardSquare = false;
 
-    styles.buttonOutline = true;
-    styles.buttonRounded = true;
+    styles.buttonOutline = false;
+    styles.buttonRounded = false;
     styles.buttonUnelevated = false;
     styles.buttonDense = false;
 

package/dist/runtime/plugin.mjs

@@ -8,12 +8,16 @@ import message_zh from "./locales/zh-hk.json";
 import routes from "./routes.mjs";
 import { defineModel } from "@hostlink/light";
 localStorage.getItem("locale") || localStorage.setItem("locale", "en");
+import { createQuasarPlugin } from "formkit-quasar";
+import { createLightPlugin } from "./formkit/index.mjs";
+import { plugin, defaultConfig } from "@formkit/vue";
 import { useLight } from "./index.mjs";
 import TypeUser from "./types/User.mjs";
 import TypeUserLog from "./types/UserLog.mjs";
 import TypeSystemValue from "./types/SystemValue.mjs";
 import TypeMailLog from "./types/MailLog.mjs";
 import TypeEventLog from "./types/EventLog.mjs";
+import { zhTW } from "@formkit/i18n";
 export default defineNuxtPlugin((nuxtApp) => {
   defineModel("User", TypeUser);
   defineModel("UserLog", TypeUserLog);
@@ -57,6 +61,17 @@ export default defineNuxtPlugin((nuxtApp) => {
       Loading
     }
   });
+  let locale = localStorage.getItem("locale") || "en";
+  if (locale == "zh-hk") {
+    locale = "zhTW";
+  }
+  nuxtApp.vueApp.use(plugin, defaultConfig({
+    plugins: [createQuasarPlugin(), createLightPlugin()],
+    locales: {
+      zhTW
+    },
+    locale
+  }));
   const router = useRouter();
   routes.forEach((route) => {
     router.addRoute(route);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "0.0.114",
+  "version": "0.0.115",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",
@@ -39,6 +39,7 @@
     "@nuxt/module-builder": "^0.5.2",
     "@quasar/extras": "^1.16.6",
     "axios": "^1.5.0",
+    "formkit-quasar": "^0.0.12",
     "json-to-graphql-query": "^2.2.5",
     "quasar": "^2.12.5",
     "unplugin-auto-import": "^0.16.6",