@hostlink/nuxt-light 0.0.118 → 1.0.2

package/dist/module.json

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

package/dist/module.mjs

@@ -1,5 +1,4 @@
 import { defineNuxtModule, createResolver, addComponentsDir, addImports, addPlugin } from '@nuxt/kit';
-import AutoImport from 'unplugin-auto-import/vite';
 
 const module = defineNuxtModule({
   meta: {
@@ -20,17 +19,6 @@ const module = defineNuxtModule({
       rel: "stylesheet",
       href: "https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Sans+HK&family=Noto+Sans+TC&family=Material+Symbols+Outlined"
     });
-    nuxt.options.vite.plugins?.push(AutoImport({
-      imports: [{
-        "quasar": [
-          "useQuasar"
-        ]
-      }, {
-        "vue-i18n": [
-          "useI18n"
-        ]
-      }]
-    }));
     addComponentsDir({
       path: resolver.resolve("./runtime/components")
     });
@@ -60,7 +48,8 @@ const module = defineNuxtModule({
       { name: "getModelFields", from },
       { name: "getModelField", from },
       { name: "getGQLFields", from },
-      { name: "model", from }
+      { name: "model", from },
+      { name: "notify", from }
     ]);
     addPlugin({
       src: resolver.resolve("./runtime/plugin"),

package/dist/runtime/components/l-app-main.vue

@@ -16,6 +16,7 @@ const appVersion = config.public.appVersion ?? '0.0.1';
 
 const quasar = useQuasar();
 const tt = await q({
+    system: ["devMode"],
     app: ["menus", "viewAsMode", "languages", { i18nMessages: ["name", "value"] }],
     my: ['username', 'first_name', 'last_name', 'roles', "styles", "language", f('granted_storage:granted', { right: "system.storage" }, [])],
 })
@@ -194,6 +195,9 @@ const containerStyle = computed(() => {
 
                 <q-toolbar-title>
                     {{ light.getCompany() }}
+                    <template  v-if="tt.system.devMode">
+                        - Development mode
+                    </template>
                 </q-toolbar-title>
 
                 <q-space />
@@ -212,7 +216,7 @@ const containerStyle = computed(() => {
                 </q-btn>
 
                 <q-btn icon="sym_o_storage" flat round dense class="q-mr-sm" v-if="my.granted_storage"
-                    :color="storageColor" >
+                    :color="storageColor">
                     <q-menu>
                         <q-card style="width:250px">
                             <q-card-section>
@@ -304,7 +308,7 @@ const containerStyle = computed(() => {
         </q-drawer>
 
         <q-page-container :class="containerClass" :style="containerStyle">
-            
+
             <!-- Error message -->
             <q-banner dense inline-actions class="bg-grey-4 q-ma-md" v-for="error in errors" rounded>
                 {{ error }}

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

@@ -0,0 +1,78 @@
+
+<script setup>
+import * as XLSX from "xlsx";
+import { computed, ref, useAttrs, useSlots } from "vue";
+import { useLight } from "#imports"
+
+const emit = defineEmits(["update:modelValue"]);
+
+const light = useLight();
+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(),
+
+}
+const loading = ref(false);
+const localData = ref([]);
+const hasFile = ref(false);
+const file = ref(null);
+const onChange = () => {
+    hasFile.value = true;
+    loading.value = true;
+    file.value.files[0].arrayBuffer().then((data) => {
+        const workbook = XLSX.read(data);
+        const sheet = workbook.Sheets[workbook.SheetNames[0]];
+        const json = XLSX.utils.sheet_to_json(sheet);
+        localData.value = json;
+        loading.value = false;
+
+        emit("update:modelValue", json);
+
+    });
+
+}
+
+const onClear = () => {
+    hasFile.value = false;
+    localData.value = [];
+    emit("update:modelValue", []);
+}
+
+const showView = ref(false);
+</script>
+
+<template>
+    <q-field v-bind="attrs" :loading="loading" :model-value="localData" @update:model-value="onClear" :clearable="hasFile">
+        <template v-slot:control>
+            <template v-if="!hasFile">
+                <input type="file" accept=".xlsx" @change="onChange" ref="file" />
+            </template>
+
+            <template v-else>
+                {{ localData.length }} records
+            </template>
+
+        </template>
+
+        <template v-slot:prepend v-if="hasFile">
+            <q-icon name="sym_o_table_view" @click="showView = true" class="cursor-pointer" />
+        </template>
+
+        <q-dialog v-model="showView" full-width>
+            <q-card>
+                <q-card-section>
+                    <q-table :rows="localData" />
+                </q-card-section>
+            </q-card>
+        </q-dialog>
+
+    </q-field>
+</template>

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

@@ -1,9 +1,9 @@
 <script setup>
 import { useLight } from "#imports";
 import { ref, reactive, onMounted } from 'vue'
-import { useQuasar, Notify } from 'quasar';
+import { useQuasar, Notify, Dialog } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { m, notify } from '../';
+import { m, notify } from '#imports';
 
 import { login, webauthnLogin } from '@hostlink/light';
 
@@ -35,9 +35,7 @@ const submit = async () => {
 }
 
 const forgetPassword = async () => {
-
-  //show dialog
-  qua.dialog({
+  Dialog.create({
     title: i18n.t("Forget password"),
     message: "Please enter your email address, we will send you a code to reset your password",
     prompt: {
@@ -50,9 +48,9 @@ const forgetPassword = async () => {
       return;
     }
 
-
-    if (await m("forgetPassword", { email: email })) {
-      qua.dialog({
+    try {
+      await m("forgetPassword", { email: email });
+      Dialog.create({
         title: "Enter your code",
         message: "Please enter the code sent to your email, your code will expire in 10 minutes",
         prompt: {
@@ -67,7 +65,7 @@ const forgetPassword = async () => {
         }
 
         if (await m("verifyCode", { code: code, email: email })) {
-          qua.dialog({
+          Dialog.create({
             title: "Reset password",
             message: "Please enter your new password",
             prompt: {
@@ -101,9 +99,19 @@ const forgetPassword = async () => {
         }
 
 
+      });
+    } catch (e) {
+      qua.notify({
+        message: e.message,
+        color: "negative",
+        icon: "sym_o_error",
+        position: "top",
+        timeout: 2000
       });
     }
   });
+
+
 };
 
 const hasBioLogin = ref(false);

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

@@ -92,6 +92,12 @@ useHead({
 
 <template>
     <q-page padding>
+        <!-- q-breadcrumbs>
+            <q-breadcrumbs-el icon="home" to="/" />
+            <q-breadcrumbs-el label="Permission" to="/Permission" />
+            <q-breadcrumbs-el label="Build" />
+        </q-breadcrumbs -->
+
         <q-toolbar v-if="showToolbar">
             <l-back-btn v-if="showBackBtn" />
             <l-add-btn v-if="showAddBtn" />
@@ -100,6 +106,7 @@ useHead({
             <q-toolbar-title>{{ $t(title) }}</q-toolbar-title>
         </q-toolbar>
 
+
         <div class="q-gutter-sm q-mb-sm">
             <slot name="header"></slot>
         </div>

package/dist/runtime/formkit/File.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { computed, useSlots } from 'vue'
+import { getErrorMessage } from 'formkit-quasar';
+import { useLight } from '#imports';
+
+
+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
+    }
+}
+
+const light = useLight();
+
+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")
+    },
+    ...props.context.attrs
+}
+
+</script>
+<template>
+    <q-file v-model="value" :label="context.label" v-bind="attrs" :error="error" :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>
+    </q-file>
+</template>

package/dist/runtime/formkit/InputXlsx.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-input-xlsx v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
+        :error-message="errorMessage">
+        <slot></slot>
+    </l-input-xlsx>
+</template>

package/dist/runtime/formkit/Toggle.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+    context: Object
+});
+
+const value = computed({
+    get: () => props.context.value,
+    set: (val) => props.context.node.input(val)
+})
+
+
+</script>
+<template>
+    <q-toggle v-model="value" :label="context.label" v-bind="context.attrs">
+    </q-toggle>
+</template>

package/dist/runtime/formkit/index.mjs

@@ -9,10 +9,22 @@ import DatePickerVue from "./DatePicker.vue";
 import TimePickerVue from "./TimePicker.vue";
 import OptionGroupVue from "./OptionGroup.vue";
 import FilePickerVue from "./FilePicker.vue";
+import FileVue from "./File.vue";
+import InputXlsxVue from "./InputXlsx.vue";
 export const createLightPlugin = () => {
   return (node) => {
     let type = node.props.type + "";
     switch (type) {
+      case "l-input-xlsx":
+        return node.define({
+          type: "input",
+          component: InputXlsxVue
+        });
+      case "l-file":
+        return node.define({
+          type: "input",
+          component: FileVue
+        });
       case "l-file-picker":
         return node.define({
           type: "input",

package/dist/runtime/lib/index.mjs

@@ -18,7 +18,7 @@ import getModelFields from "./getModelFields.mjs";
 import getModelColumns from "./getModelColumns.mjs";
 import sv from "./sv.mjs";
 import model from "./model.mjs";
-const notify = function(message, color = "green") {
+const notify = function(message, color = "positive") {
   Notify.create({
     message,
     color,

package/dist/runtime/pages/System/database/table.vue

@@ -14,10 +14,10 @@ const { system: { database } } = await query({
 <template>
     <l-page>
         <q-card flat bordered>
-            <q-list bordered class="rounded-borders" separator>
+            <q-list  bordered class="rounded-borders" separator>
                 <q-expansion-item :label="table.name" v-for="table in database.table" expand-separator>
                     <div class=" q-ma-sm">
-                        <q-table :rows="table.columns" :rows-per-page-options="[0]" hide-pagination flat bordered></q-table>
+                        <q-table dense :rows="table.columns" :rows-per-page-options="[0]" hide-pagination flat bordered></q-table>
                     </div>
 
                 </q-expansion-item>

package/dist/runtime/pages/System/mailtest.vue

@@ -1,24 +1,34 @@
 <script setup>
-import { reactive } from 'vue'
 import { m } from '../../'
-const obj = reactive({})
+import { Notify } from "quasar"
 
-const onSave = async () => {
-    if (await m("mailTest", obj)) {
-        que.notify({
-            message: "Mail sent",
+const onSubmit = async (data) => {
+    try {
+        await m("mailTest", data)
+
+
+        Notify.create({
+            message: "Email sent",
             color: "positive",
-            icon: "email"
+            icon: "check"
         });
+
+    } catch (e) {
+        Notify.create({
+            message: e.message,
+            color: "negative",
+            icon: "warning"
+        })
     }
 }
 </script>
 <template>
     <l-page>
-        <l-form @save="onSave">
-            <l-input label="Email" v-model="obj.email" required></l-input>
-            <l-input label="Subject" v-model="obj.subject" required></l-input>
-            <l-input type="textarea" label="Content" v-model="obj.content" required></l-input>
-        </l-form>
+        <FormKit type="l-form" @submit="onSubmit">
+            <FormKit type="l-input" label="Email" name="email" validation="required|email"></FormKit>
+            <FormKit type="l-input" label="Subject" name="subject" validation="required"></FormKit>
+            <FormKit type="l-input" input-type="textarea" label="Content" name="content" validation="required">
+            </FormKit>
+        </FormKit>
     </l-page>
 </template>

package/dist/runtime/pages/System/menu/index.vue

@@ -274,10 +274,15 @@ const onAddChildMenu = (node, type) => {
                         <div class="q-gutter-md">
                             <l-input label="Label" v-model="selectedNode.label" />
                             <l-input label="To" v-model="selectedNode.to" />
-                            <l-input label="Icon" v-model="selectedNode.icon" hint="example: sym_o_add"/>
+                            <l-input label="Icon" v-model="selectedNode.icon" hint="example: sym_o_add" />
                             <l-input label="Permission" v-model="selectedNode.permission" />
                             <l-input label="UUID" v-model="selectedNode.uuid" readonly />
                         </div>
+
+                        <div>
+                            <a href="https://fonts.google.com/icons" target="_blank">Material Icons</a>
+                        </div>
+
                     </q-card-section>
                 </template>
 

package/dist/runtime/pages/System/package.vue

@@ -1,9 +1,9 @@
 <script setup>
-import { q } from '../../'
+import { q } from '#imports'
 const { system } = await q({ system: ["package"] })
 </script>
 <template>
     <l-page>
-        <q-table :rows="system.package" :rows-per-page-options="[0]" hide-pagination flat bordered></q-table>
+        <q-table dense :rows="system.package" :rows-per-page-options="[0]" hide-pagination flat bordered></q-table>
     </l-page>
 </template>

package/dist/runtime/pages/System/setting.vue

@@ -1,23 +1,24 @@
 <script setup>
-import { useQuasar } from 'quasar'
+import { Notify } from 'quasar'
 import { useRouter } from 'vue-router'
-import { reactive } from "vue"
 import { q, m } from '../../'
 
 const router = useRouter()
-const que = useQuasar()
-
 const { app } = await q({ app: { config: ["name", "value"] } })
-
-//const system = await q("system", ["passwordPolicy"])
-
-const obj = reactive(app.config.reduce((acc, cur) => {
+const obj = app.config.reduce((acc, cur) => {
     acc[cur.name] = cur.value
     return acc
-}, {}));
-
-const fields = ["company", "company_logo", "password_upper_case", "password_lower_case", "password_number", "password_special_character",
-    "file_manager", "two_factor_authentication"];
+}, {});
+
+const fields = ["company", "company_logo",
+    "password_contains_uppercase",
+    "password_contains_lowercase",
+    "password_contains_numeric",
+    "password_contains_symbol",
+    "password_min_length",
+    "file_manager",
+    "two_factor_authentication",
+    "mode"];
 
 //filter out fields that are not in the app.config table
 Object.keys(obj).forEach((key) => {
@@ -26,53 +27,72 @@ Object.keys(obj).forEach((key) => {
     }
 })
 
-const onSave = async () => {
-    const data = [];
-    Object.keys(obj).forEach((key) => {
+const onSubmit = async (d, form) => {
+    let data = [];
+    Object.keys(d).forEach((key) => {
         data.push({
             name: key,
-            value: obj[key]
+            value: d[key]
         })
     })
+
     await m("updateAppConfigs", { data })
     //show success
-    que.notify({
-        message: "Saved",
-        type: "positive",
-        position: "top",
-    });
+    Notify.create({
+        message: "Settings updated",
+        color: "positive",
+        icon: "check"
+    })
+    router.go(-1);
+}
 
 
+if (obj.mode != 'prod') {
+    obj.mode = 'dev'
+} else {
+    obj.mode = 'prod'
 }
 
 
 </script>
 <template>
     <l-page>
-        <l-form @save="onSave">
-            <l-input label="Company" v-model="obj.company"></l-input>
-            <l-input label="Company logo" v-model="obj.company_logo"></l-input>
+
+        <FormKit type="l-form" :value="obj" #default="{ value }" @submit="onSubmit">
+            <FormKit type="l-input" label="Company" name="company" validation="required"></FormKit>
+            <FormKit type="l-input" label="Company logo" name="company_logo"></FormKit>
 
             <q-field label="Password policy" stack-label>
-                <q-checkbox label="Upper case" v-model="obj.password_upper_case" true-value="1"
-                    false-value="0"></q-checkbox>
-                <q-checkbox label="Lower case" v-model="obj.password_lower_case" true-value="1"
-                    false-value="0"></q-checkbox>
-                <q-checkbox label="Number" v-model="obj.password_number" true-value="1" false-value="0"></q-checkbox>
-                <q-checkbox label="Special character" v-model="obj.password_special_character" true-value="1"
-                    false-value="0"></q-checkbox>
+                <FormKit type="q-checkbox" label="Upper Case" name="password_contains_uppercase" true-value="1"
+                    false-value="0" />
+                <FormKit type="q-checkbox" label="Lower Case" name="password_contains_lowercase" true-value="1"
+                    false-value="0" />
+                <FormKit type="q-checkbox" label="Number" name="password_contains_numeric" true-value="1" false-value="0" />
+                <FormKit type="q-checkbox" label="Special Character" name="password_contains_symbol" true-value="1"
+                    false-value="0" />
             </q-field>
 
+            <FormKit type="l-input" label="Password min Length" name="password_min_length" validation="required|number">
+            </FormKit>
 
             <q-field label="File manager" stack-label>
-                <q-checkbox label="Show" v-model="obj.file_manager" true-value="1" false-value="0"></q-checkbox>
+                <FormKit type="q-checkbox" label="Show" name="file_manager" true-value="1" false-value="0" />
             </q-field>
 
             <q-field label="Two factor authentication" stack-label>
-                <q-checkbox label="Enable" v-model="obj.two_factor_authentication" true-value="1"
-                    false-value="0"></q-checkbox>
+                <FormKit type="q-checkbox" label="Enable" name="two_factor_authentication" true-value="1" false-value="0" />
             </q-field>
 
-        </l-form>
+            <FormKit label="Mode" type="l-select" :options="[
+                { label: 'Production', value: 'prod' },
+                { label: 'Development', value: 'dev' },
+
+            ]" name="mode" validation="required">
+
+
+            </FormKit>
+
+
+        </FormKit>
     </l-page>
 </template>

package/dist/types.d.mts

@@ -1,5 +1,5 @@
 
-import type { ModuleOptions } from './module'
+import type { ModuleOptions } from './module.js'
 
 
 declare module '@nuxt/schema' {
@@ -13,4 +13,4 @@ declare module 'nuxt/schema' {
 }
 
 
-export type { ModuleOptions, default } from './module'
+export type { ModuleOptions, default } from './module.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "0.0.118",
+  "version": "1.0.2",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",
@@ -39,15 +39,13 @@
     "@nuxt/module-builder": "^0.5.2",
     "@quasar/extras": "^1.16.6",
     "axios": "^1.5.0",
-    "formkit-quasar": "^0.0.12",
+    "formkit-quasar": "^0.0.14",
     "json-to-graphql-query": "^2.2.5",
     "quasar": "^2.12.5",
-    "unplugin-auto-import": "^0.16.6",
     "vue-i18n": "^9.2.2",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@nuxt/content": "^2.8.2",
     "@nuxt/devtools": "latest",
     "@nuxt/eslint-config": "^0.2.0",
     "@nuxt/schema": "^3.7.4",