@hostlink/nuxt-light 0.0.3

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

@@ -0,0 +1,73 @@
+<script setup>
+const route = useRoute();
+const router = useRouter();
+const module = route.path.split("/")[1];
+
+const form = ref(null);
+const props = defineProps({
+    modelValue: {
+        type: Object
+    }
+});
+
+const que = useQuasar();
+const emit = defineEmits(["save"]);
+const save = async () => {
+    console.log(form.value)
+
+    let valid = await form.value.validate();
+    if (!valid) return;
+    if (valid) {
+        emit("save");
+    }
+
+
+
+    if (props.modelValue) {
+        const [module, id_name] = route.name.split("-");
+
+        if (route.params[id_name]) {//edit
+
+
+
+            try {
+                if (await updateObject(module, parseInt(route.params[id_name]), props.modelValue)) {
+                    router.push(`/${module}`);
+                    return;
+                }
+            } catch (e) {
+                //show error
+                que.dialog({
+                    title: "Error",
+                    message: e.message,
+                    ok: "OK"
+                });
+
+            }
+        } else { // add
+            if (await addObject(module, props.modelValue)) {
+                router.push(`/${module}`);
+                return;
+            }
+        }
+    }
+}
+const onSubmit = (e) => {
+    e.preventDefault();
+    save();
+}
+
+</script>
+<template>
+    <q-form ref="form" @submit="onSubmit">
+        <l-card>
+            <q-card-section>
+                <slot></slot>
+            </q-card-section>
+
+            <q-card-actions align="right">
+                <l-save-btn @click="save" />
+            </q-card-actions>
+        </l-card>
+    </q-form>
+</template>

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

@@ -0,0 +1,48 @@
+<script setup>
+
+const props = defineProps({
+    modelValue: {
+    },
+    rules: {
+        type: Array,
+        default: () => []
+    },
+    required: {
+        type: Boolean,
+        default: false
+    },
+    label: {
+        type: String,
+        default: ""
+    },
+});
+const emit = defineEmits(["update:modelValue"]);
+
+const new_rules = props.rules || [];
+
+//has required prop (in properties)
+if (props.required) {
+    new_rules.push(val => !!val || 'Required.');
+}
+
+
+const localValue = computed({
+    get: () => props.modelValue,
+    set: (value) => emit('update:modelValue', value)
+});
+
+const localLabel = computed(() => {
+    if (props.required && !localValue.value) {
+        return t(props.label);
+    }
+    return t(props.label);
+
+});
+
+
+
+
+</script>
+<template>
+    <q-input :label="localLabel" v-model="localValue" hide-bottom-space :rules="new_rules"></q-input>
+</template>

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

@@ -0,0 +1,14 @@
+<script setup>
+const props = defineProps(["label"]);
+
+</script>
+<template>
+    <q-item>
+        <q-item-section>
+            <q-item-label>{{ props.label }}</q-item-label>
+        </q-item-section>
+        <q-item-section side>
+            <q-item-label><slot></slot></q-item-label>
+        </q-item-section>
+    </q-item>
+</template>

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

@@ -0,0 +1,24 @@
+<script setup>
+const props = defineProps({
+    to: {
+        type: String,
+        required: false
+    },
+    type: {
+        type: String,
+        required: false,
+        default: "primary"
+    },
+})
+const router = useRouter();
+const navigate = () => {
+    if (props.to) {
+        router.push(props.to);
+    }
+}
+</script>
+<template>
+    <el-link :type="props.type" @click="navigate">
+        <slot />
+    </el-link>
+</template>

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

@@ -0,0 +1,5 @@
+<template>
+    <q-list bordered separator>
+        <slot></slot>
+    </q-list>
+</template>

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

@@ -0,0 +1,128 @@
+<script setup>
+
+defineProps({
+  company: String,
+  companyLogo: String
+
+})
+
+const form1 = ref(null);
+const data = reactive({
+  username: "", password: ""
+});
+
+const qua = useQuasar()
+const submit = async () => {
+  if (await form1.value.validate()) {
+
+    try {
+      await login(data.username, data.password)
+      window.self.location = "/";
+    } catch (e) {
+      qua.notify({
+        message: e.message,
+        color: "negative",
+        icon: "sym_o_error",
+        position: "top",
+        timeout: 2000
+      });
+    }
+  }
+}
+
+const forgetPassword = async () => {
+
+  //show dialog
+  qua.dialog({
+    title: "Forget password",
+    message: "Please enter your email address, we will send you a code to reset your password",
+    prompt: {
+      model: "",
+      type: "email",
+    },
+    cancel: true
+  }).onOk(async email => {
+    if (email.length == 0) {
+      return;
+    }
+
+
+    if (await m("forgetPassword", { email: email })) {
+      qua.dialog({
+        title: "Enter your code",
+        message: "Please enter the code sent to your email, your code will expire in 10 minutes",
+        prompt: {
+          model: "",
+          type: "text"
+        },
+        cancel: true,
+        persistent: true
+      }).onOk(async code => {
+        if (code.length == 0) {
+          return;
+        }
+
+        if (await m("verifyCode", { code: code, email: email })) {
+          qua.dialog({
+            title: "Reset password",
+            message: "Please enter your new password",
+            prompt: {
+              model: "",
+              type: "password"
+            },
+          }).onOk(async password => {
+            if (password.length == 0) {
+              return;
+            }
+
+            if (await m("resetPassword", { password: password, email: email, code: code })) {
+              qua.notify({
+                message: "Your password has been reset successfully",
+                color: "positive",
+                icon: "sym_o_check",
+                position: "top",
+                timeout: 2000
+              });
+            }
+          });
+        } else {
+          qua.notify({
+            message: "Your code is invalid",
+            color: "negative",
+            icon: "sym_o_error",
+            position: "top",
+            timeout: 2000
+          });
+
+        }
+
+
+      });
+    }
+  });
+};
+
+
+
+</script>
+
+<template>
+  <q-card bordered flat style="min-width:400px;max-width: 400px;" class="fixed-center">
+    <q-card-section>
+      <q-img :src="companyLogo" class="full-width" />
+      <div class="text-h6">
+        {{ company }}
+      </div>
+      <q-form ref="form1">
+        <q-input v-model="data.username" label="Username" required :rules="[v => !!v || 'Username is required']"
+          clearable />
+        <q-input v-model="data.password" label="Password" required type="password" clearable
+          :rules="[v => !!v || 'Password is required']" />
+      </q-form>
+    </q-card-section>
+    <q-card-actions>
+      <q-btn label="Login" outline rounded="" color="primary" icon="sym_o_login" @click="submit" />
+      <q-btn label="Forget password" outline rounded="" color="primary" icon="sym_o_lock_reset" @click="forgetPassword" />
+    </q-card-actions>
+  </q-card>
+</template>

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

@@ -0,0 +1,37 @@
+<script setup>
+
+defineProps(["value","dense"])
+
+</script>
+
+
+<style scoped>
+.menu-list .q-item {
+    border-radius: 24px 24px 24px 24px;
+}
+
+.menu-list .q-router-link--exact-active {
+    background: linear-gradient(118deg,
+            var(--q-primary),
+            rgba(115, 103, 240, 0.7));
+    color: #fff;
+}
+</style>
+
+<template>
+    <q-expansion-item v-if="value.menus" :label="value.label" :icon="value.icon" :dense="dense">
+        <q-list class="q-pl-md">
+            <l-menu :value="menu" v-for="menu in value.menus" :dense="dense"></l-menu>
+        </q-list>
+    </q-expansion-item>
+    <q-list v-else class="menu-list" :dense="dense">
+        <q-item v-ripple :to="value.to">
+            <q-item-section avatar>
+                <q-icon :name="value.icon" />
+            </q-item-section>
+            <q-item-section>
+                <q-item-label v-text="value.label"></q-item-label>
+            </q-item-section>
+        </q-item>
+    </q-list>
+</template>

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

@@ -0,0 +1,94 @@
+<script setup>
+const router = useRouter();
+const route = useRoute();
+
+const props = defineProps({
+    type: {
+        type: String,
+        default: "view"
+    },
+    title: {
+        type: String,
+        default: ""
+    },
+    backBtn: {
+        type: Boolean,
+        default: false
+    },
+    editBtn: {
+        type: Boolean,
+        default: false
+    },
+    deleteBtn: {
+        type: Boolean,
+        default: false
+    },
+    addBtn: {
+        type: Boolean,
+        default: false
+    },
+});
+
+let showToolbar = false;
+let showBackBtn = false;
+let showEditBtn = false;
+let showAddBtn = false;
+let showDeleteBtn = false;
+
+
+if (props.type == "edit") {
+    showToolbar = true
+    showBackBtn = true
+}
+
+if (props.type == "add") {
+    showToolbar = true
+    showBackBtn = true
+}
+
+if (props.type == "view") {
+    showToolbar = true
+    showBackBtn = true
+}
+
+if (props.editBtn) {
+    showToolbar = true
+    showEditBtn = true
+}
+
+if (props.deleteBtn) {
+    showToolbar = true
+    showDeleteBtn = true
+}
+
+if(props.addBtn){
+    showToolbar = true
+    showAddBtn = true
+}
+
+const title = props.title || route.path.split("/")[1];
+
+
+const module = route.path.split("/")[1];
+const onDelete = async () => {
+    if (await removeObject(module, route.params.id)) {
+        router.push(`/${module}`);
+    }
+}
+</script>
+
+<template>
+    <q-page padding>
+        <q-toolbar v-if="showToolbar">
+            <l-back-btn v-if="showBackBtn" />
+            <l-add-btn v-if="showAddBtn" />
+            <l-edit-btn v-if="showEditBtn" />
+            <l-delete-btn v-if="showDeleteBtn" @submit="onDelete" />
+
+            <slot name="header"></slot>
+            <q-toolbar-title>{{ title }}</q-toolbar-title>
+        </q-toolbar>
+
+        <slot></slot>
+    </q-page>
+</template>

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

@@ -0,0 +1,5 @@
+<template>
+    <div class="row q-col-gutter-md">
+        <slot></slot>
+    </div>
+</template>

package/dist/runtime/components/l-save-btn.vue

@@ -0,0 +1,3 @@
+<template>
+    <q-btn color="primary" flat rounded  icon="sym_o_save" label="Save" />
+</template>

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

@@ -0,0 +1,77 @@
+<script setup>
+import { isNumber } from 'element-plus/es/utils';
+
+
+const props = defineProps({
+
+    rules: {
+        type: Array,
+        default: () => []
+    },
+    required: {
+        type: Boolean,
+        default: false
+    },
+    options: {
+        type: Array,
+        default: () => []
+    },
+    optionLabel: {
+        type: String,
+        default: "label"
+    },
+    label: {
+        type: String,
+        default: ""
+    },
+})
+
+
+
+if (props.required) {
+    props.rules.push((val) => {
+        if(isNumber(val)){
+            return;
+        }
+        
+        return !!val || 'Required.'
+    });
+}
+
+let select_options = ref(props.options);
+
+const filterFn = (val, update, abort) => {
+
+    if (val === "") {
+        update(() => {
+            select_options.value = props.options
+        });
+        return;
+    }
+
+    update(() => {
+
+        const needle = val.toLowerCase();
+
+        select_options.value = props.options.filter(v => v[props.optionLabel].toLowerCase().indexOf(needle) > -1);
+
+
+
+
+    })
+}
+
+
+const localLabel = computed(() => {
+    return t(props.label);
+});
+
+const clearable = computed(() => {
+    return !props.required;
+});
+
+</script>
+<template>
+    <q-select :label="localLabel" emit-value map-options :options="select_options" @filter="filterFn"
+        :option-label="optionLabel" hide-bottom-space :rules="rules" :clearable="clearable" />
+</template>