@hostlink/nuxt-light 0.0.113 → 0.0.115

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/index.d.ts

@@ -12,7 +12,7 @@ export declare const useLight: () => {
     addError: (error: String) => void;
     getErrors: () => String[];
     removeError: (error: String) => void;
-    getStyle: (name: String, defaultdefaultValue: any) => any;
+    getStyle: (name: String) => any;
     setStyles: (s: Object) => void;
     getStyles: () => {
         theme?: String | undefined;

package/dist/runtime/index.mjs

@@ -3,6 +3,13 @@ import { watch, reactive } from "vue";
 import { m } from "./lib/index.mjs";
 const errors = [];
 let styles = {};
+let defaultStyle = {
+  inputOutlined: true,
+  inputStackLabel: true,
+  tableFlat: true,
+  tableBorder: true,
+  tableSeparator: "cell"
+};
 const app = reactive({
   company: "",
   companyLogo: "",
@@ -38,9 +45,12 @@ const app = reactive({
       errors.splice(index, 1);
     }
   },
-  getStyle(name, defaultdefaultValue) {
+  getStyle(name) {
     if (styles[name] === void 0) {
-      return defaultdefaultValue;
+      if (defaultStyle[name] !== void 0) {
+        return defaultStyle[name];
+      }
+      return false;
     }
     return styles[name];
   },

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>