@hostlink/nuxt-light 1.38.0 → 1.40.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.38.0",
+  "version": "1.40.0",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "3.5.0"

package/dist/module.mjs

@@ -303,7 +303,8 @@ const module = defineNuxtModule({
       components: {
         defaults: {
           QInput: {
-            stackLabel: true
+            stackLabel: true,
+            outlined: true
           },
           QSelect: {
             stackLabel: true

package/dist/runtime/assets/main.css

@@ -1 +1 @@
-body{font-family:Noto Sans,Noto Sans HK,Noto Sans TC,-apple-system,Helvetica Neue,Helvetica,Arial,sans-serif}.q-card__actions .q-btn--rectangle{padding:4px 16px}.q-table--dense .q-table td,.q-table--dense .q-table td:first-child,.q-table--dense .q-table th,.q-table--dense .q-table th:first-child{padding:2px 4px}.q-tab-panel{padding:8px}::-webkit-scrollbar{background:transparent;height:12px;overflow:visible;width:14px;z-index:12}::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:#c1c1c1;border:4px solid transparent;border-radius:10px;margin:4px;min-height:32px;min-width:32px;-webkit-transition:background-color .32s ease-in-out;transition:background-color .32s ease-in-out;width:10px;z-index:12}::-webkit-scrollbar-thumb:hover{background:#c1c1c1}
+body{font-family:Noto Sans,Noto Sans HK,Noto Sans TC,-apple-system,Helvetica Neue,Helvetica,Arial,sans-serif}.q-field--dense .q-field__before,.q-field--dense .q-field__prepend{padding-right:5px}.q-field--dense .q-field__after,.q-field--dense .q-field__append{padding-left:5px}.q-field--outlined .q-field__control{padding:0 10px}.q-field__before,.q-field__prepend{padding-right:10px}.q-field--filled .q-field__control{padding:0 10px}.q-card__actions .q-btn--rectangle{padding:4px 16px}.q-table--dense .q-table td,.q-table--dense .q-table td:first-child,.q-table--dense .q-table th,.q-table--dense .q-table th:first-child{padding:2px 4px}.q-tab-panel{padding:8px}::-webkit-scrollbar{background:transparent;height:12px;overflow:visible;width:14px;z-index:12}::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:#c1c1c1;border:4px solid transparent;border-radius:10px;margin:4px;min-height:32px;min-width:32px;-webkit-transition:background-color .32s ease-in-out;transition:background-color .32s ease-in-out;width:10px;z-index:12}::-webkit-scrollbar-thumb:hover{background:#c1c1c1}

package/dist/runtime/components/L/System/Setting/authentication.vue

@@ -23,7 +23,10 @@ const onSubmit = async (d) => {
 
         <form-kit label="Password based" type="l-checkbox" name="authentication_password_based" true-value="1"
             false-value="0" />
-        <q-separator />
+
+        <div class="col-12">
+            <q-separator />
+        </div>
 
         <form-kit label="Google Client ID" type="l-input" name="authentication_google_client_id" />
 

package/dist/runtime/components/L/System/Setting/forget-password.vue

@@ -14,7 +14,7 @@ const onSubmit = async (d) => {
 </script>
 
 <template>
-    <form-kit type="l-form" :value="{
+    <form-kit :bordered="false" type="l-form" :value="{
   forget_password_enabled: processedEnabled,
   forget_password_subject: processedSubject,
   forget_password_template: processedTemplate

package/dist/runtime/components/L/System/Setting/modules.vue

@@ -7,8 +7,9 @@ defineProps({
 
 <template>
     <form-kit type="l-form" :bordered="false" :value="$props" @submit="$emit('submit', $event)">
-        <l-field :label="$t('File Manager')" stack-label :color="$light.color" hide-bottom-space>
+        <l-field :label="$t('File Manager')" stack-label :color="$light.color" hide-bottom-space class="col-6">
             <form-kit type="l-checkbox" label="Show" name="file_manager" true-value="1" false-value="0" />
         </l-field>
+        
     </form-kit>
 </template>

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

@@ -55,6 +55,7 @@ let my = reactive(tt.my);
 const light = useLight();
 light.devMode = tt.system.devMode;
 light.init(my.styles);
+light.setMyRoles(my.roles);
 light.setPermissions(my.permissions);
 light.setMyFavorites(toRaw(my.myFavorites));
 const myFavorites = computed(() => {

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

@@ -4,6 +4,7 @@ import { useLight, watch } from "#imports";
 import { useQuasar } from "quasar";
 import { q } from "#imports";
 import { useRoute } from "vue-router";
+import "../assets/main.css";
 const route = useRoute();
 const light = useLight();
 const quasar = useQuasar();

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

@@ -7,20 +7,20 @@ const textColorRef = ref(null);
 const textHightlightRef = ref(null);
 const highlight = ref("#ffff00aa");
 const foreColor = ref("#000000");
-const TextColorCMD = (cmd, name) => {
+const TextColorCMD = ((cmd, name) => {
   const edit = editorRef.value;
   textColorRef.value.hide();
   edit.caret.restore();
   edit.runCmd(cmd, name);
   edit.focus();
-};
-const TextHightlightCMD = (cmd, name) => {
+});
+const TextHightlightCMD = ((cmd, name) => {
   const edit = editorRef.value;
   textHightlightRef.value.hide();
   edit.caret.restore();
   edit.runCmd(cmd, name);
   edit.focus();
-};
+});
 const emit = defineEmits(["update:modelValue"]);
 const props = defineProps({
   fullscreen: { type: Boolean, required: false, skipCheck: true },

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

@@ -81,11 +81,8 @@ const onSubmit = (e) => {
 <template>
     <q-form ref="form" @submit="onSubmit">
         <l-card :bordered="bordered">
-            <q-card-section>
-                <div :class="`q-gutter-${gutter}`">
-                    <slot></slot>
-                </div>
-
+            <q-card-section class="row q-col-gutter-md">
+                <slot></slot>
             </q-card-section>
 
             <q-card-actions align="right">

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from "vue";
+import { computed, ref, useAttrs } from "vue";
 import { useI18n } from "vue-i18n";
 import tc2sc from "../composables/tc2sc";
 const { t } = useI18n();
@@ -12,6 +12,7 @@ const props = defineProps({
   fillMask: { type: [Boolean, String], required: false, skipCheck: true },
   reverseFillMask: { type: Boolean, required: false, skipCheck: true },
   unmaskedValue: { type: Boolean, required: false, skipCheck: true },
+  maskTokens: { type: null, required: false },
   modelValue: { type: null, required: true },
   error: { type: [Boolean, null], required: false, skipCheck: true },
   errorMessage: { type: null, required: false },
@@ -135,10 +136,17 @@ const localShowPassword = computed(() => {
 const onClickTc2Sc = () => {
   modelValue.value = tc2sc(modelValue.value ?? "");
 };
+const attrs = useAttrs();
+const localClass = computed(() => {
+  if (attrs.class) {
+    return attrs.class;
+  }
+  return "col-12";
+});
 </script>
 
 <template>
-    <q-input v-bind="$light.getInputProps($props)" :rules="new_rules" :type="localType">
+    <q-input v-bind="$light.getInputProps($props)" :rules="new_rules" :type="localType" :class="localClass">
         <template v-if="translate" #prepend>
             <q-btn icon="sym_o_translate" flat dense rounded>
                 <q-menu dense>

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

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, reactive, onMounted, resolveComponent } from "vue";
 import { useQuasar } from "quasar";
-import { api, useHead, m } from "#imports";
+import { api, useHead } from "#imports";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 const emits = defineEmits(["login"]);

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

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { ref, useAttrs, computed } from "vue";
 const props = defineProps({
   name: { type: null, required: false },
   virtualScrollHorizontal: { type: Boolean, required: false, skipCheck: true },
@@ -150,8 +150,15 @@ const filterFn = (val, update, abort) => {
     });
   });
 };
+const attrs = useAttrs();
+const localClass = computed(() => {
+  if (attrs.class) {
+    return attrs.class;
+  }
+  return "col-12";
+});
 </script>
 
 <template>
-    <q-select v-bind="$light.getInputProps($props)" :options="select_options" @filter="filterFn" />
+    <q-select v-bind="$light.getInputProps($props)" :options="select_options" @filter="filterFn" :class="localClass" />
 </template>

package/dist/runtime/composables/useLight.d.ts

@@ -1,4 +1,4 @@
-import type { QDialogOptions, QNotifyCreateOptions, QNotifyUpdateOptions } from 'quasar';
+import type { QDialogOptions, QNotifyCreateOptions } from 'quasar';
 declare module 'vue' {
     interface ComponentCustomProperties {
         $light: typeof light;
@@ -99,7 +99,7 @@ declare const light: {
             increment: (amount?: number) => void;
             setDefaults: (props: import("quasar").QLoadingBarOptions) => void;
         };
-        notify: (opts: QNotifyCreateOptions | string) => (props?: QNotifyUpdateOptions) => void;
+        notify: (opts: QNotifyCreateOptions | string) => (props?: import("quasar").QNotifyUpdateOptions) => void;
         platform: {
             userAgent: string;
             is: {
@@ -589,8 +589,9 @@ declare const light: {
     isAdmin: boolean;
     permissions: string[];
     myFavorites: any[];
+    myRoles: string[];
     $t: any;
-    notify: (opts: QNotifyCreateOptions | string) => (props?: QNotifyUpdateOptions) => void;
+    notify: (opts: QNotifyCreateOptions | string) => (props?: import("quasar").QNotifyUpdateOptions) => void;
     dialog: (opts: QDialogOptions) => import("quasar").DialogChainObject;
     users: {
         create: (user: User) => Promise<User>;
@@ -603,6 +604,7 @@ declare const light: {
     };
     getColorValue: () => string;
     setMyFavorites: (favorites: Array<any>) => void;
+    setMyRoles: (roles: Array<string>) => void;
     reloadMyFavorites: () => Promise<void>;
     getMyFavorites: () => any[];
     isDarkMode: () => boolean;
@@ -703,7 +705,7 @@ declare const _default: () => {
             increment: (amount?: number) => void;
             setDefaults: (props: import("quasar").QLoadingBarOptions) => void;
         };
-        notify: (opts: QNotifyCreateOptions | string) => (props?: QNotifyUpdateOptions) => void;
+        notify: (opts: QNotifyCreateOptions | string) => (props?: import("quasar").QNotifyUpdateOptions) => void;
         platform: {
             userAgent: string;
             is: {
@@ -1193,8 +1195,9 @@ declare const _default: () => {
     isAdmin: boolean;
     permissions: string[];
     myFavorites: any[];
+    myRoles: string[];
     $t: any;
-    notify: (opts: QNotifyCreateOptions | string) => (props?: QNotifyUpdateOptions) => void;
+    notify: (opts: QNotifyCreateOptions | string) => (props?: import("quasar").QNotifyUpdateOptions) => void;
     dialog: (opts: QDialogOptions) => import("quasar").DialogChainObject;
     users: {
         create: (user: User) => Promise<User>;
@@ -1207,6 +1210,7 @@ declare const _default: () => {
     };
     getColorValue: () => string;
     setMyFavorites: (favorites: Array<any>) => void;
+    setMyRoles: (roles: Array<string>) => void;
     reloadMyFavorites: () => Promise<void>;
     getMyFavorites: () => any[];
     isDarkMode: () => boolean;

package/dist/runtime/composables/useLight.js

@@ -74,6 +74,7 @@ const light = reactive({
   isAdmin: false,
   permissions: Array(),
   myFavorites: Array(),
+  myRoles: Array(),
   $t: null,
   notify: (opts) => {
     if (light.$q == null) {
@@ -158,6 +159,9 @@ const light = reactive({
   setMyFavorites: (favorites) => {
     light.myFavorites = favorites;
   },
+  setMyRoles: (roles) => {
+    light.myRoles = roles;
+  },
   reloadMyFavorites: async () => {
     const data = await q({
       my: {

package/dist/runtime/composables/useRoles.d.ts

@@ -0,0 +1,7 @@
+export default function useRoles(): {
+    roles: import("vue").ComputedRef<string[]>;
+    hasRole: (role: string) => boolean;
+    hasAny: (...args: any[]) => boolean;
+    hasAll: (wanted?: string[]) => boolean;
+    reload: () => Promise<string[]>;
+};

package/dist/runtime/composables/useRoles.js

@@ -0,0 +1,39 @@
+import { computed } from "vue";
+import useLight from "./useLight.js";
+import q from "./q.js";
+export default function useRoles() {
+  const light = useLight();
+  const roles = computed(() => light.myRoles || []);
+  function hasRole(role) {
+    if (!role) return false;
+    if (light.isAdmin) return true;
+    return light.myRoles.includes(role);
+  }
+  function hasAny(...args) {
+    const list = Array.isArray(args[0]) ? args[0] : args;
+    if (light.isAdmin) return true;
+    return list.some((r) => light.myRoles.includes(r));
+  }
+  function hasAll(wanted = []) {
+    if (light.isAdmin) return true;
+    return wanted.every((r) => light.myRoles.includes(r));
+  }
+  async function reload() {
+    const data = await q({
+      my: {
+        roles
+      }
+    });
+    const newRoles = (data?.my?.roles || []).map((r) => r.role || r);
+    light.myRoles = newRoles;
+    light.isAdmin = newRoles.includes("Administrators");
+    return newRoles;
+  }
+  return {
+    roles,
+    hasRole,
+    hasAny,
+    hasAll,
+    reload
+  };
+}

package/dist/runtime/composables/useWebAuthn.d.ts

@@ -0,0 +1,5 @@
+declare const _default: () => {
+    assertion: () => Promise<PublicKeyCredential>;
+    attestation: () => Promise<PublicKeyCredential>;
+};
+export default _default;

package/dist/runtime/composables/useWebAuthn.js

@@ -0,0 +1,5 @@
+import { useWebAuthn } from "@hostlink/light";
+import { default as api } from "./api.js";
+export default () => {
+  return useWebAuthn(api.axios);
+};

package/dist/runtime/formkit/Form.vue

@@ -77,10 +77,8 @@ const isNoDirtyCheck = computed(() => {
 <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 class="row q-col-gutter-md">
+                <slot v-bind="context"></slot>
             </q-card-section>
 
             <q-card-actions align="right" v-if="context.actions">

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

@@ -24,9 +24,9 @@ const onSave = async () => {
 
 <template>
     <l-page>
-        <l-form @save="onSave">
+        <l-form @submit="onSave">
 
-            <l-input label="Permission name" v-model="obj.value" required></l-input>
+            <l-input label="Permission name" v-model="obj.value" required class="col-12"></l-input>
 
             <l-field label="Roles" stack-label>
                 <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline :color="$light.color">

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

@@ -52,7 +52,7 @@ const languages = tt.app.languages.map((lang) => {
     <l-page>
         
         <FormKit type="l-form" :value="obj">
-            <l-row>
+            <l-row class="col">
                 <l-col md="6">
                     <FormKit type="l-input" label="Username" name="username" validation="required" />
                     <FormKit type="l-input" label="Password" name="password" :validation="system.passwordPolicy"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.38.0",
+  "version": "1.40.0",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",
@@ -32,31 +32,31 @@
   "dependencies": {
     "@azure/msal-browser": "^3.26.1",
     "@formkit/drag-and-drop": "^0.5.3",
-    "@hostlink/light": "^2.8.0",
+    "@hostlink/light": "^2.9.0",
     "@nuxt/module-builder": "^1.0.1",
-    "@quasar/extras": "^1.16.11",
+    "@quasar/extras": "^1.17.0",
     "@quasar/quasar-ui-qmarkdown": "^2.0.5",
-    "axios": "^1.5.0",
+    "axios": "^1.12.2",
     "defu": "^6.1.4",
     "diff2html": "^3.4.47",
     "formkit-quasar": "^0.0.15",
     "json-to-graphql-query": "^2.2.5",
     "nuxt-quasar-ui": "^2.1.12",
-    "quasar": "^2.17.0",
+    "quasar": "^2.18.5",
     "vue-i18n": "^9.2.2",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxt/kit": "^4.0.3",
-    "@nuxt/schema": "^4.0.3",
+    "@nuxt/kit": "^4.1.2",
+    "@nuxt/schema": "^4.1.2",
     "@nuxt/test-utils": "^3.17.2",
     "@types/node": "^22.5.0",
     "changelogen": "^0.5.4",
     "eslint": "^8.46.0",
-    "nuxt": "^4.0.3",
-    "typescript": "^5.8.3",
+    "nuxt": "^4.1.2",
+    "typescript": "^5.9.2",
     "vue-tsc": "^2.2.8"
   }
 }