@hostlink/nuxt-light 1.39.0 → 1.40.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.39.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.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-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();
@@ -136,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-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/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.39.0",
+  "version": "1.40.0",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",