@hostlink/nuxt-light 1.21.6 → 1.21.8

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.21.6",
+  "version": "1.21.8",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

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

@@ -1,11 +1,5 @@
 <script setup lang="ts">
-import { q, m } from '#imports'
-import { useQuasar } from 'quasar'
-const $q = useQuasar()
-
-
 const emits = defineEmits(["submit"])
-
 withDefaults(defineProps<{
     mail_driver: string,
     mail_host: string
@@ -43,7 +37,7 @@ const onLoginGmail = () => {
         ]" validation="required"></FormKit>
 
         <template v-if="value.mail_driver === 'gmail'">
-            <l-btn label="Login" @click="onLoginGmail"></l-btn>
+            <l-btn label="Login" @click="onLoginGmail" icon="sym_o_login" />
         </template>
 
         <template v-else>

package/dist/runtime/components/{l-user-eventlog.vue → L/User/eventlog.vue}

@@ -5,7 +5,8 @@ const props = defineProps(['id']);
 <template>
     <div>
         <l-table row-key="eventlog_id" sort-by="eventlog_id:desc"
-            :columns="model('EventLog').columns(['eventlog_id', 'class', 'id', 'action', 'created_time'])" @request-data="async (req) => {
+            :columns="model('EventLog').columns(['eventlog_id', 'class', 'id', 'action', 'created_time'])"
+            @request-data="async (req) => {
                 const a = {
                     listUser: {
                         __args: {

package/dist/runtime/components/{l-user-overview.vue → L/User/overview.vue}

@@ -17,7 +17,8 @@ const obj = await collect("User", {
     phone: true,
     roles: true,
     status: true,
-    join_date: true
+    join_date: true,
+    twoFactorEnabled: true,
 }).where("user_id", props.id).first()
 
 </script>
@@ -40,8 +41,11 @@ const obj = await collect("User", {
                         </l-item>
                         <l-item label="Status">{{ model('User').columns(["status"])[0].format(obj.status) }}</l-item>
                         <l-item label="Join date">{{ obj.join_date }}</l-item>
+                        <l-item label="Two factor authentication">{{ obj.twoFactorEnabled ? "Yes" : "No"
+                            }}</l-item>
                     </q-list>
                 </l-col>
+
             </l-row>
         </q-card-section>
     </l-card>

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

@@ -5,7 +5,8 @@ import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { ref, computed, reactive, provide, watch, toRaw } from 'vue';
 import { useRuntimeConfig } from 'nuxt/app';
-import { api } from '#imports';
+import { api, } from '#imports';
+
 
 const emits = defineEmits(["logout"]);
 const $q = useQuasar();

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

@@ -1,39 +1,17 @@
 <script setup lang="ts">
 import { type QBtnProps } from "quasar";
-import { computed } from "vue";
-import { useLight } from '#imports';
-import { useI18n } from "vue-i18n";
-
-export interface LBtnProps extends  QBtnProps {
+export interface LBtnProps extends QBtnProps {
     permission?: string;
 }
-
-const { t } = useI18n();
-const props = defineProps<LBtnProps>();
-
-const light = useLight();
-
-const attrs = computed(() => {
-    const a = {
-        ...{
-            rounded: light.getStyle("buttonRounded"),
-            outline: light.getStyle("buttonOutline"),
-            unelevated: light.getStyle("buttonUnelevated"),
-            dense: light.getStyle("buttonDense"),
-        },
-        ...props,
-    }
-
-    if (a.label !== undefined) {
-        a.label = t(a.label)
-    }
-
-    a.color = (props.color != undefined) ? props.color : light.color
-    return a;
+withDefaults(defineProps<LBtnProps>(), {
+    outline: undefined,
+    rounded: undefined,
+    unelevated: undefined,
+    dense: undefined,
 });
 </script>
 <template>
-    <q-btn v-bind="attrs" v-if="$light.isGranted(permission)">
+    <q-btn v-if="$light.isGranted(permission)" v-bind="$light.getButtonProps($props)">
         <slot></slot>
     </q-btn>
 </template>

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

@@ -8,7 +8,7 @@ const emit = defineEmits(["close"]);
 const minimized = defineModel<boolean>("minimized", { default: false })
 const maximized = defineModel<boolean>("maximized", { default: false })
 
-export interface LCardProps extends  QCardProps {
+export interface LCardProps extends QCardProps {
     loading?: boolean;
     title?: string;
     /**
@@ -30,11 +30,8 @@ const props = withDefaults(defineProps<LCardProps>(), {
 
 
 const attrs = computed(() => {
-    const a = { ...props };
-    if (props.flat === undefined) a.flat = light.getStyle("cardFlat");
-    if (props.bordered === undefined) a.bordered = light.getStyle("cardBordered");
-    if (props.square === undefined) a.square = light.getStyle("cardSquare");
-    return a;
+    return { ...light.styles.card, ...Object.fromEntries(Object.entries(props).filter(([key, value]) => value !== undefined)) };
+
 });
 
 const barClass = computed(() => {

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

@@ -1,25 +1,9 @@
 <script setup lang="ts">
-import { computed } from "vue"
 import type { QCheckboxProps } from "quasar"
-
-export interface LCheckboxProps extends QCheckboxProps {
-}
-
-const modelValue = defineModel();
-
-const emit = defineEmits(["update:modelValue"]);
-
-const props = defineProps<LCheckboxProps>()
-
-const localValue = computed({
-    get: () => modelValue.value,
-    set: (value) => {
-        modelValue.value = value;
-    }
-});
+defineProps<QCheckboxProps>()
 </script>
 <template>
-    <q-checkbox v-bind="$props" v-model="localValue" :label="$t($props.label ?? '')" :color="$light.color">
+    <q-checkbox v-bind="$props" :color="color ?? $light.color" :label="label ? $t(label) : undefined">
         <slot></slot>
     </q-checkbox>
 </template>

package/dist/runtime/components/l-date-picker.vue

@@ -30,6 +30,7 @@ export interface LDatePickerProps {
     range?: boolean,
     mask?: string,
     disable?: boolean
+    color?: string
 }
 
 const props = withDefaults(defineProps<LDatePickerProps>(), {
@@ -127,25 +128,11 @@ if (!props.range) {
 }
 
 const input_attrs = computed(() => {
-    let a: QInputProps = {
-        modelValue: localValue.value,
-        ...props
-    }
 
+    const a = light.getInputProps(props);
     a.rules = rules;
     a.mask = props.range ? "####-##-## - ####-##-##" : "####-##-##"
 
-    if (props.filled == undefined) a.filled = light.getStyle("inputFilled");
-    if (props.outlined == undefined) a.outlined = light.getStyle("inputOutlined");
-    if (props.standout == undefined) a.standout = light.getStyle("inputStandout");
-    if (props.rounded == undefined) a.rounded = light.getStyle("inputRounded");
-    if (props.dense == undefined) a.dense = light.getStyle("inputDense");
-    if (props.square == undefined) a.square = light.getStyle("inputSquare");
-    if (props.stackLabel == undefined) a.stackLabel = light.getStyle("inputStackLabel");
-
-    if (props.label) {
-        a.label = t(props.label);
-    }
     return a;
 })
 
@@ -157,13 +144,13 @@ const date_attrs = computed(() => {
 
 </script>
 <template>
-    <q-input v-bind="input_attrs" v-model="localValue" :rules="rules" :color="$light.color">
+    <q-input v-bind="input_attrs" v-model="localValue">
         <template v-slot:prepend>
             <q-btn icon="sym_o_event" round dense flat>
                 <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">
-                    <q-date v-bind="date_attrs" v-model="dateValue" :color="$light.color">
+                    <q-date v-bind="date_attrs" v-model="dateValue" :color="color ?? $light.color">
                         <div class="row items-center justify-end">
-                            <q-btn v-close-popup label="Close" :color="$light.color" flat />
+                            <q-btn v-close-popup label="Close" :color="color ?? $light.color" flat />
                         </div>
                     </q-date>
                 </q-popup-proxy>

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

@@ -11,10 +11,7 @@ const { t } = useI18n();
 
 const attrs = computed(() => {
 
-    const a = {
-        ...props,
-        outlined: light.getStyle("inputOutlined"),
-    };
+    const a = { ...light.styles.input, ...JSON.parse(JSON.stringify(props)) };
 
     if (props.label) {
         a.label = t(props.label);

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, useAttrs } from "vue";
+import { ref, computed } from "vue";
 import { useLight, m, q } from '#imports';
 import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
@@ -7,9 +7,8 @@ import { format } from 'quasar'
 const { humanStorageSize } = format
 const light = useLight();
 const i18n = useI18n();
-const quasar = useQuasar();
-const $q = quasar;
-
+const $q = useQuasar();
+const modelValue = defineModel()
 
 const { system } = await q({
     system: {
@@ -18,7 +17,6 @@ const { system } = await q({
 })
 
 export interface LFileProps {
-    modelValue?: string;
     label?: string;
     filled?: boolean;
     outlined?: boolean;
@@ -30,6 +28,7 @@ export interface LFileProps {
     path?: string;
     accept?: string;
     driveIndex?: number;
+    color?: string;
 }
 
 const props = withDefaults(defineProps<LFileProps>(), {
@@ -45,38 +44,19 @@ const props = withDefaults(defineProps<LFileProps>(), {
     driveIndex: 0
 });
 
-const emit = defineEmits(["update:modelValue"]);
-
 const show = ref(false);
 
-
-const localValue = computed({
-    get: () => props.modelValue,
-    set: (value) => emit("update:modelValue", value),
-})
-
-
-
 const attrs = computed(() => {
-    const a = { ...useAttrs, ...props };
-    if (props.filled === undefined) a.filled = light.getStyle("inputFilled");
-    if (props.outlined === undefined) a.outlined = light.getStyle("inputOutlined");
-    if (props.standout === undefined) a.standout = light.getStyle("inputStandout");
-    if (props.rounded === undefined) a.rounded = light.getStyle("inputRounded");
-    if (props.dense === undefined) a.dense = light.getStyle("inputDense");
-    if (props.square === undefined) a.square = light.getStyle("inputSquare");
-    if (props.stackLabel === undefined) a.stackLabel = light.getStyle("inputStackLabel");
-    return a;
+    return { ...light.styles.input, ...JSON.parse(JSON.stringify(props)) };
 });
 
-
 const uploadFile = ref<File | null>(null);
 const rename = ref(true);
 
 const onUploadFile = async () => {
 
     if (!uploadFile.value) {
-        quasar.dialog({
+        $q.dialog({
             title: "Error",
             message: i18n.t("Please select a file"),
             color: "negative"
@@ -86,7 +66,7 @@ const onUploadFile = async () => {
 
     //check file size
     if (uploadFile.value.size > system.maxUploadSize) {
-        quasar.dialog({
+        $q.dialog({
             title: "Error",
             message: "File size is too big. Max size is " + humanStorageSize(system.maxUploadSize),
             color: "negative"
@@ -109,7 +89,7 @@ const onUploadFile = async () => {
         //remove first slash if exists
         if (v.startsWith("/")) v = v.substr(1);
 
-        localValue.value = v;
+        modelValue.value = v;
         show.value = false;
         uploadFile.value = null;
     } catch (e: any) {
@@ -122,25 +102,24 @@ const onUploadFile = async () => {
     }
     $q.loading.hide();
 
-
-
 }
 
 </script>
 <template>
-    <l-input v-bind="attrs" v-model="localValue" hide-bottom-space>
+    <q-input v-bind="attrs" v-model="modelValue" hide-bottom-space>
         <q-dialog v-model="show" persistent transition-show="scale" transition-hide="scale">
             <l-card style="width:300px">
                 <q-card-section>
                     <q-file ref="file" v-model="uploadFile" name="file" :label="$t('File')" :accept="accept"
-                        :hint="`Max upload size: ${humanStorageSize(system.maxUploadSize)}`"></q-file>
+                        :hint="`Max upload size: ${humanStorageSize(system.maxUploadSize)}`"
+                        :color="attrs.color"></q-file>
                     <!-- q-checkbox v-model="rename" :label="$t('Rename file if exists')"></q-checkbox-->
                 </q-card-section>
 
                 <q-card-actions align="right">
-                    <q-btn flat :label="$t('Cancel')" :color="$light.color" @click="uploadFile = null"
+                    <q-btn flat :label="$t('Cancel')" :color="attrs.color" @click="uploadFile = null"
                         v-close-popup></q-btn>
-                    <q-btn flat :label="$t('Upload')" :color="$light.color" @click="onUploadFile"></q-btn>
+                    <q-btn flat :label="$t('Upload')" :color="attrs.color" @click="onUploadFile"></q-btn>
                 </q-card-actions>
             </l-card>
         </q-dialog>
@@ -151,5 +130,5 @@ const onUploadFile = async () => {
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
-    </l-input>
+    </q-input>
 </template>

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

@@ -14,7 +14,7 @@ export interface LFileProps {
     dense?: boolean;
     square?: boolean;
     stackLabel?: boolean;
-    
+
 }
 
 const props = withDefaults(defineProps<LFileProps>(), {
@@ -45,14 +45,12 @@ const localValue = computed({
 
 
 const attrs = computed(() => {
-    const a = { ...useAttrs, ...props };
-    if (props.filled === undefined) a.filled = light.getStyle("inputFilled");
-    if (props.outlined === undefined) a.outlined = light.getStyle("inputOutlined");
-    if (props.standout === undefined) a.standout = light.getStyle("inputStandout");
-    if (props.rounded === undefined) a.rounded = light.getStyle("inputRounded");
-    if (props.dense === undefined) a.dense = light.getStyle("inputDense");
-    if (props.square === undefined) a.square = light.getStyle("inputSquare");
-    if (props.stackLabel === undefined) a.stackLabel = light.getStyle("inputStackLabel");
+    const a = {
+        ...light.styles.input,
+        ...useAttrs,
+        ...JSON.parse(JSON.stringify(props))
+    };
+
     return a;
 });