@hostlink/nuxt-light 1.0.1 → 1.0.3

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.0.1"
+  "version": "1.0.3"
 }

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,7 +16,11 @@ const appVersion = config.public.appVersion ?? '0.0.1';
 
 const quasar = useQuasar();
 const tt = await q({
-    app: ["menus", "viewAsMode", "languages", { i18nMessages: ["name", "value"] }],
+    system: ["devMode"],
+    app: ["menus", "viewAsMode", "languages",
+        "copyrightYear",
+        "copyrightName",
+        { i18nMessages: ["name", "value"] }],
     my: ['username', 'first_name', 'last_name', 'roles', "styles", "language", f('granted_storage:granted', { right: "system.storage" }, [])],
 })
 
@@ -194,6 +198,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 +219,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 +311,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 }}
@@ -328,7 +335,9 @@ const containerStyle = computed(() => {
         <q-footer bordered v-if="style.footer">
             <q-item>
                 <q-item-section>
-                    {{ light.getCompany() }} {{ appVersion }} - Copyright 2023 HostLink(HK). Build {{ light.getVersion() }}
+                    {{ light.getCompany() }} {{ appVersion }} - Copyright {{ app.copyrightYear }} {{ app.copyrightName }}.
+                    Build {{
+                        light.getVersion() }}
                 </q-item-section>
             </q-item>
         </q-footer>

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

@@ -38,7 +38,7 @@ const showBody = computed(() => !minimize.value || fullScreen.value);
 <template>
     <q-card v-bind="attrs" :class="{ 'fullscreen': fullScreen, 'no-margin': fullScreen }">
         <q-bar :class="cl" v-if="title">
-            <div>{{ title }}</div>
+            <div>{{ $t(title) }}</div>
             <q-space />
             <!-- q-btn-dropdown dense flat icon="sym_o_search" persistent>
                 <div class="q-ma-md">

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

@@ -7,7 +7,7 @@ const props = defineProps({
     },
     gutter: {
         type: String,
-        default: "none"
+        default: "md"
     }
 })
 

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

@@ -1,5 +1,4 @@
 <script setup>
-import { defineModel } from 'vue'
 const COLORS = [
     'primary',
     'secondary',
@@ -84,7 +83,7 @@ const props = defineProps({
         <q-separator />
         <q-item>
             <q-item-section>
-                <q-item-label>Color</q-item-label>
+                <q-item-label>{{ $t('Color') }}</q-item-label>
                 <div class="row">
                     <div v-for="c in COLORS" :key="c" :class="`bg-${c}`" style="width: 1.5rem; height: 1.5rem;"
                         class="q-ma-xs cursor-pointer rounded-borders" @click="$emit('update:color', c)" />
@@ -115,7 +114,7 @@ const props = defineProps({
 
         <q-item>
             <q-item-section>
-                <q-item-label>Menu overlay header </q-item-label>
+                <q-item-label>Menu overlay header</q-item-label>
             </q-item-section>
             <q-item-section side>
                 <q-toggle :model-value="menuOverlayHeader"
@@ -127,7 +126,7 @@ const props = defineProps({
 
         <q-item>
             <q-item-section>
-                <q-item-label>Show footer</q-item-label>
+                <q-item-label>{{ $t('Show footer') }}</q-item-label>
             </q-item-section>
             <q-item-section side>
                 <q-toggle :model-value="footer" @update:model-value="$emit('update:footer', $event)" />

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

@@ -464,7 +464,7 @@ const isDark = computed(() => light.isDarkMode());
 </script>
 <template>
   <q-layout view="hHh lpR fFf" :class="isDark ? '' : 'bg-white'" container :style="{ 'min-height': height }">
-    <q-header bordered :class="isDark?'':'bg-white text-grey-8'" height-hint="64">
+    <q-header bordered :class="isDark ? '' : 'bg-white text-grey-8'" height-hint="64">
       <q-toolbar>
         <q-btn flat round @click="toggleLeftDrawer" aria-label="Menu" icon="menu" class="q-mr-sm" />
 
@@ -629,7 +629,7 @@ const isDark = computed(() => light.isDarkMode());
 
         <q-table flat bordered :columns="columns" :rows="items" @row-dblclick="onDblclickRow" @row-click="onClickRow"
           :pagination="pagination" row-key="path" selection="multiple" v-model:selected="selected" dense
-          :loading="loading">
+          :loading="loading" :loading-label="$t('Loading...')" :no-data-label="$t('No data available')">
           <template #body-cell-icon="props">
             <q-td auto-width>
               <q-icon name="sym_o_folder" v-if="props.value == 'folder'" size="sm" />
@@ -646,14 +646,14 @@ const isDark = computed(() => light.isDarkMode());
                       <q-item-section avatar>
                         <q-icon name="sym_o_delete"></q-icon>
                       </q-item-section>
-                      <q-item-section>{{ $t('Delete') }} </q-item-section>
+                      <q-item-section>{{ $t('Delete') }}</q-item-section>
                     </q-item>
 
                     <q-item v-if="props.row.type == 'file'" clickable v-close-popup @click="onDownloadRow(props.row)">
                       <q-item-section avatar>
                         <q-icon name="sym_o_download"></q-icon>
                       </q-item-section>
-                      <q-item-section>Download</q-item-section>
+                      <q-item-section>{{ $t('Download') }}</q-item-section>
                     </q-item>
 
                     <q-item clickable v-close-popup @click="onRenameRow(props.row)" v-if="canRenameRow(props.row)">

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/components/l-row.vue

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

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

@@ -589,7 +589,7 @@ const getCellClass = (col: any, row: any) => {
 
 
         <template #top-right="props" v-if="fullscreen || searchable">
-            <q-input v-if="searchable" outlined dense debounce="300" v-model="filter" placeholder="Search">
+            <q-input v-if="searchable" outlined dense debounce="300" v-model="filter" :placeholder="$t('Search')">
                 <template v-slot:append>
                     <q-icon name="search" />
                 </template>
@@ -618,8 +618,9 @@ const getCellClass = (col: any, row: any) => {
                     <template v-if="col.searchable">
 
                         <template v-if="col.searchType == 'number'">
-                            <q-input dense clearable filled square v-model.number="filters[col.name]"
-                                @keydown.enter.prevent="onFilters" @clear="onFilters" mask="##########"></q-input>
+                            <q-input style="min-width: 80px;" 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'">
@@ -635,7 +636,7 @@ const getCellClass = (col: any, row: any) => {
                         </template>
 
                         <template v-if="!col.searchType">
-                            <q-input dense clearable filled square v-model="filters[col.name]"
+                            <q-input style="min-width: 80px;" dense clearable filled square v-model="filters[col.name]"
                                 @keydown.enter.prevent="onFilters" @clear="onFilters" enterkeyhint="search"></q-input>
 
                         </template>

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/Form.vue

@@ -77,13 +77,13 @@ if (!props.context.onSubmit) {
     <form v-bind="context.attrs">
         <l-card :bordered="bordered">
             <q-card-section>
-                <div :class="`q-col-gutter-${gutter}`">
+                <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"
+                <l-btn icon="sym_o_check" label="Submit" @click="onSubmit" :disabled="!context.state.dirty"
                     :loading="loading"></l-btn>
             </q-card-actions>
         </l-card>

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/locales/en.json

@@ -1,16 +1,9 @@
 {
-    "SystemBackup": "System backup",
-    "SystemValue": "System value",
-    "UserGroup": "User group",
-    "UserLog": "User log",
-    "FileManager": "File manager",
-    "mail-test": "Mail test",
-    "vx-table-message": "Showing {0} to {1} of {2} entries",
-    "vx-per-page": "Per page",
-    "Dashboard": "Dashboard",
-    "Theme Customizer": "Theme Customizer",
-    "Customize & Preview in Real Time": "Customize & Preview in Real Time",
-    "Permission": "Permission",
+    "Must contain at least {0} characters": "Must contain at least {0} characters",
+    "contains_uppercase": "Must contain at least one uppercase letter",
+    "contains_lowercase": "Must contain at least one lowercase letter",
+    "contains_numeric": "Must contain at least one number",
+    "contains_symbol": "Must contain at least one special character",
     "storage_usage": "{0} free of {1}",
     "input_required": "Please input {0}",
     "input_min": "Please input at least {0} characters"

package/dist/runtime/locales/zh-hk.json

@@ -1,4 +1,19 @@
 {
+    "Password policy": "密碼規則",
+    "Must contain at least {0} characters": "必須包含至少{0}個字元",
+    "contains_symbol": "必須包含符號",
+    "contains_numeric": "必須包含數字",
+    "contains_lowercase": "必須包含小寫字母",
+    "contains_uppercase": "必須包含大寫字母",
+    "Last access time": "最後存取時間",
+    "Default": "預設",
+    "Register": "註冊",
+    "Reset your 2FA": "重設雙重認證",
+    "Result": "結果",
+    "Update password": "更新密碼",
+    "Two factor auth": "雙重認證",
+    "Color": "顏色",
+    "Show footer": "顯示頁尾",
     "Date": "日期",
     "Online": "在線",
     "Update": "更新",
@@ -108,8 +123,6 @@
     "Rename": "重新命名",
     "Database": "資料庫",
     "Charset": "字元編碼",
-    "vx-table-message": "顯示 {0} 至 {1} 共 {2} 項資料",
-    "vx-per-page": "每頁顯示",
     "Role": "角色",
     "Permission": "權限",
     "Old password": "舊密碼",

package/dist/runtime/pages/Permission/all.vue

@@ -69,7 +69,7 @@ const onUpdate = (value, role, permission) => {
 
 <template>
     <l-page>
-        <q-table :columns="columns" flat bordered :rows="rows" :pagination="{ rowsPerPage: 0 }">
+        <q-table :columns="columns" flat bordered :rows="rows" :pagination="{ rowsPerPage: 0 }" dense>
             <template #body="props">
                 <q-tr :props="props">
                     <q-td>

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

@@ -1,5 +1,5 @@
 <script setup>
-import { q } from '../../'
+import { q } from '#imports'
 
 let roles = await q("listRole", ["name"]);
 roles = roles.map((role) => {
@@ -9,10 +9,6 @@ roles = roles.map((role) => {
     };
 });
 
-const onSubmit = (e) => {
-    e.preventDefault();
-    console.log("submit");
-}
 </script>
 
 <template>