@hostlink/nuxt-light 1.66.0 → 1.67.0

package/dist/runtime/components/L/InputXlsx.vue

@@ -0,0 +1,81 @@
+<script setup>
+import * as XLSX from "xlsx";
+import { ref, computed, useAttrs } from "vue";
+import { useLightInputDefaults } from "../../composables/useLightProps";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  label: { type: String, required: false },
+  hint: { type: String, required: false },
+  disable: { type: Boolean, required: false }
+});
+const attrs = useAttrs();
+const modelValue = defineModel({ type: Array, ...{ default: () => [] } });
+const loading = ref(false);
+const errorMsg = ref(null);
+const fileInput = ref(null);
+const showView = ref(false);
+const hasFile = computed(() => modelValue.value.length > 0);
+const base = useLightInputDefaults(props, attrs, []);
+const fieldProps = computed(() => ({
+  ...base.value,
+  loading: loading.value,
+  error: !!errorMsg.value,
+  errorMessage: errorMsg.value ?? void 0
+}));
+const onChange = async () => {
+  const f = fileInput.value?.files?.[0];
+  if (!f) return;
+  loading.value = true;
+  errorMsg.value = null;
+  try {
+    const data = await f.arrayBuffer();
+    const workbook = XLSX.read(data);
+    const sheet = workbook.Sheets[workbook.SheetNames[0]];
+    modelValue.value = XLSX.utils.sheet_to_json(sheet);
+  } catch (e) {
+    errorMsg.value = e?.message ?? "Failed to parse file";
+    modelValue.value = [];
+  } finally {
+    loading.value = false;
+  }
+};
+const onClear = () => {
+  modelValue.value = [];
+  errorMsg.value = null;
+  if (fileInput.value) fileInput.value.value = "";
+};
+</script>
+
+<template>
+    <q-field v-bind="fieldProps" :model-value="modelValue">
+        <template #control>
+            <template v-if="!hasFile">
+                <input type="file" accept=".xlsx,.xls" @change="onChange" ref="fileInput" />
+            </template>
+            <template v-else>
+                {{ modelValue.length }} records loaded
+            </template>
+        </template>
+
+        <template #prepend v-if="hasFile">
+            <q-icon name="sym_o_table_view" @click="showView = true" class="cursor-pointer" />
+        </template>
+
+        <template #append v-if="hasFile">
+            <q-icon name="sym_o_close" @click="onClear" class="cursor-pointer" />
+        </template>
+
+        <q-dialog v-model="showView" full-width>
+            <q-card>
+                <q-bar class="bg-primary text-white">
+                    <div>{{ label ?? "Preview" }}</div>
+                    <q-space />
+                    <q-btn dense flat icon="sym_o_close" v-close-popup />
+                </q-bar>
+                <q-card-section>
+                    <q-table :rows="modelValue" dense separator="cell" flat bordered />
+                </q-card-section>
+            </q-card>
+        </q-dialog>
+    </q-field>
+</template>

package/dist/runtime/components/L/InputXlsx.vue.d.ts

@@ -0,0 +1,17 @@
+export interface LInputXlsxProps {
+    label?: string;
+    hint?: string;
+    disable?: boolean;
+}
+type __VLS_Props = LInputXlsxProps;
+type __VLS_ModelProps = {
+    modelValue?: any[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/{l-item.vue → L/Item.vue}

@@ -1,5 +1,7 @@
 <script setup>
-defineProps({
+import { computed } from "vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
   label: { type: String, required: false },
   name: { type: String, required: false },
   top: { type: Boolean, required: false, default: false },
@@ -24,11 +26,19 @@ defineProps({
   focused: { type: Boolean, required: false, skipCheck: true },
   onClick: { type: Function, required: false }
 });
+const L_KEYS = ["label", "name", "top", "labelTop", "alignItems"];
+const itemProps = computed(() => {
+  const result = {};
+  for (const [k, v] of Object.entries(props)) {
+    if (!L_KEYS.includes(k) && v !== void 0) result[k] = v;
+  }
+  return result;
+});
 </script>
 
 <template>
-    <q-item v-bind="$props">
-        <q-item-section side v-if=$slots.avatar>
+    <q-item v-bind="itemProps">
+        <q-item-section side v-if="$slots.avatar">
             <slot name="avatar"></slot>
         </q-item-section>
 
@@ -40,9 +50,8 @@ defineProps({
             <slot></slot>
         </q-item-section>
 
-        <q-item-section side v-if=$slots.end>
+        <q-item-section side v-if="$slots.end">
             <slot name="end"></slot>
         </q-item-section>
-
     </q-item>
 </template>

package/dist/runtime/components/{l-list.vue → L/List.vue}

@@ -1,4 +1,6 @@
 <script setup>
+import { computed } from "vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   fields: { type: Array, required: false },
   modelValue: { type: null, required: false },
@@ -9,41 +11,36 @@ const props = defineProps({
   padding: { type: Boolean, required: false, skipCheck: true },
   tag: { type: null, required: false }
 });
-function getTo(field) {
-  const raw = field;
-  if (raw.to) {
-    if (raw.to instanceof Function) {
-      return raw.to(props.modelValue);
-    }
-    if (typeof raw.to == "string") {
-      return raw.to;
-    }
+const L_KEYS = ["fields", "modelValue"];
+const listProps = computed(() => {
+  const result = {};
+  for (const [k, v] of Object.entries(props)) {
+    if (!L_KEYS.includes(k) && v !== void 0) result[k] = v;
   }
+  return result;
+});
+function getTo(field) {
+  if (!field.to) return null;
+  if (field.to instanceof Function) return field.to(props.modelValue);
+  if (typeof field.to === "string") return field.to;
   return null;
 }
-const getFieldValue = (field) => {
+function getFieldValue(field) {
   const model = props.modelValue;
-  if (field.field) {
-    if (field.field instanceof Function) {
-      return field.field(model);
-    }
-  }
-  ;
+  if (field.field instanceof Function) return field.field(model);
   return model ? model[field.name] : null;
-};
+}
 </script>
 
 <template>
-    <q-list v-bind="$props">
+    <q-list v-bind="listProps">
         <template v-if="fields">
-            <l-item v-for="field in fields" :label="field.label" :to="getTo(field)">
+            <l-item v-for="field in fields" :key="field.name ?? field.label" :label="field.label" :to="getTo(field)">
                 {{ getFieldValue(field) }}
             </l-item>
-
         </template>
         <template v-else>
             <slot></slot>
         </template>
-
     </q-list>
 </template>

package/dist/runtime/components/{l-page.vue → L/Page.vue}

@@ -1,8 +1,8 @@
 <script setup>
 import { useHead, useLight } from "#imports";
 import { useRouter, useRoute } from "vue-router";
-import model from "../composables/model";
-import getID from "../composables/getID";
+import model from "../../composables/model";
+import getID from "../../composables/getID";
 import { computed } from "vue";
 const router = useRouter();
 const route = useRoute();
@@ -18,11 +18,9 @@ const props = defineProps({
   gutter: { type: String, required: false, default: "sm" },
   breadcrumbs: { type: Boolean, required: false }
 });
-const showToolbar = computed(() => {
-  if (props.backBtn || props.editBtn || props.deleteBtn || props.addBtn) {
-    return true;
-  }
-});
+const showToolbar = computed(
+  () => !!(props.backBtn || props.editBtn || props.deleteBtn || props.addBtn)
+);
 const title = computed(() => {
   let t = props.title || route.path.split("/")[1].replace(/([a-z])(?=[A-Z])/g, "$1 ").replace(/([A-Z]*)(?=[A-Z][a-z])/g, "$1 ");
   t = t.replace(/\s\s+/g, " ");
@@ -39,7 +37,7 @@ const onDelete = async () => {
   }
 };
 useHead({
-  title: light.company + " - " + title.value
+  title: () => light.company + " - " + title.value
 });
 const localClass = computed(() => {
   return "q-gutter-" + props.gutter;

package/dist/runtime/components/L/SearchNumber.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    modelValue?: number | string | {
+        min?: number | null;
+        max?: number | null;
+    } | null;
+    placeholder?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: any) => any;
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((value: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/L/SearchNumber.vue

@@ -0,0 +1,139 @@
+<script setup>
+import { ref, watch, computed } from "vue";
+import { useI18n } from "vue-i18n";
+const props = defineProps({
+  modelValue: { type: [Number, String, Object, null], required: false },
+  placeholder: { type: String, required: false }
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+const { t } = useI18n();
+const mode = ref("equals");
+const equalsValue = ref(null);
+const minValue = ref(null);
+const maxValue = ref(null);
+watch(() => props.modelValue, (val) => {
+  if (val == null || val === "") {
+    equalsValue.value = null;
+    minValue.value = null;
+    maxValue.value = null;
+  } else if (typeof val === "object") {
+    mode.value = "range";
+    equalsValue.value = null;
+    minValue.value = val.min ?? null;
+    maxValue.value = val.max ?? null;
+  } else {
+    mode.value = "equals";
+    equalsValue.value = Number(val);
+    minValue.value = null;
+    maxValue.value = null;
+  }
+}, { immediate: true });
+const hasValue = computed(() => {
+  if (props.modelValue == null || props.modelValue === "") return false;
+  if (typeof props.modelValue === "object") {
+    const { min, max } = props.modelValue;
+    return min != null || max != null;
+  }
+  return true;
+});
+const displayLabel = computed(() => {
+  if (!hasValue.value) return t("Search");
+  if (typeof props.modelValue === "object") {
+    const { min, max } = props.modelValue;
+    if (min != null && max != null) return `${min} \u2013 ${max}`;
+    if (min != null) return `\u2265 ${min}`;
+    if (max != null) return `\u2264 ${max}`;
+  }
+  return `= ${props.modelValue}`;
+});
+const apply = () => {
+  let out = null;
+  if (mode.value === "equals") {
+    out = equalsValue.value;
+  } else {
+    const outRange = {};
+    if (minValue.value != null) outRange.min = minValue.value;
+    if (maxValue.value != null) outRange.max = maxValue.value;
+    if (Object.keys(outRange).length > 0) out = outRange;
+  }
+  emit("update:modelValue", out);
+  emit("change", out);
+};
+const clear = () => {
+  equalsValue.value = null;
+  minValue.value = null;
+  maxValue.value = null;
+  emit("update:modelValue", null);
+  emit("change", null);
+};
+</script>
+
+<template>
+    <q-btn-dropdown
+        dense flat square no-caps
+        :color="hasValue ? 'primary' : 'grey-7'"
+        :label="displayLabel"
+        :icon="hasValue ? 'sym_o_filter_alt' : 'sym_o_search'"
+        size="sm"
+        content-class="l-search-number-dropdown"
+    >
+        <div class="q-pa-md" style="min-width: 280px">
+            <q-tabs
+                v-model="mode"
+                dense
+                no-caps
+                align="left"
+                active-color="primary"
+                indicator-color="primary"
+                class="text-grey"
+            >
+                <q-tab name="equals" :label="t('Equals')" />
+                <q-tab name="range" :label="t('Range')" />
+            </q-tabs>
+
+            <q-separator class="q-mb-sm" />
+
+            <q-tab-panels v-model="mode" animated>
+                <q-tab-panel name="equals" class="q-pa-none">
+                    <q-input
+                        v-model.number="equalsValue"
+                        dense filled square
+                        type="number"
+                        mask="##########"
+                        :placeholder="placeholder || t('Enter a number')"
+                        autofocus
+                        @keydown.enter.prevent="apply"
+                    />
+                </q-tab-panel>
+                <q-tab-panel name="range" class="q-pa-none">
+                    <div class="row q-gutter-sm items-center">
+                        <q-input
+                            v-model.number="minValue"
+                            dense filled square
+                            type="number"
+                            mask="##########"
+                            :placeholder="t('Min')"
+                            class="col"
+                            @keydown.enter.prevent="apply"
+                        />
+                        <span class="text-grey">—</span>
+                        <q-input
+                            v-model.number="maxValue"
+                            dense filled square
+                            type="number"
+                            mask="##########"
+                            :placeholder="t('Max')"
+                            class="col"
+                            @keydown.enter.prevent="apply"
+                        />
+                    </div>
+                </q-tab-panel>
+            </q-tab-panels>
+
+            <div class="row q-gutter-sm justify-end q-mt-md">
+                <q-btn flat dense :label="t('Clear')" color="negative" @click="clear" />
+                <q-btn flat dense :label="t('Apply')" color="primary" @click="apply" />
+            </div>
+        </div>
+    </q-btn-dropdown>
+</template>

package/dist/runtime/components/L/SearchNumber.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    modelValue?: number | string | {
+        min?: number | null;
+        max?: number | null;
+    } | null;
+    placeholder?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: any) => any;
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((value: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/L/Select.d.vue.ts

@@ -0,0 +1,46 @@
+import type { QSelectProps } from "quasar";
+export interface LSelectProps extends QSelectProps {
+    required?: boolean;
+}
+type __VLS_Props = LSelectProps;
+type __VLS_ModelProps = {
+    modelValue?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_11: string, __VLS_12: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_11>]?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    validate: () => any;
+    focus: () => any;
+    reset: () => any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    dark: boolean | null;
+    rounded: boolean;
+    square: boolean;
+    dense: boolean;
+    outlined: boolean;
+    optionValue: string | ((option: string | any) => any);
+    filled: boolean;
+    stackLabel: boolean;
+    standout: string | boolean;
+    hideBottomSpace: boolean;
+    emitValue: boolean;
+    mapOptions: boolean;
+    inputDebounce: string | number;
+    optionLabel: string | ((option: string | any) => string);
+    optionsDark: boolean | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/{l-select.vue → L/Select.vue}

@@ -1,6 +1,10 @@
 <script setup>
-import { ref, useAttrs, computed } from "vue";
+import { ref, useAttrs, computed, watch } from "vue";
+import useLight from "../../composables/useLight";
+import { useLightInputDefaults } from "../../composables/useLightProps";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
+  required: { type: Boolean, required: false },
   name: { type: null, required: false },
   virtualScrollHorizontal: { type: Boolean, required: false, skipCheck: true },
   virtualScrollSliceSize: { type: null, required: false },
@@ -100,6 +104,10 @@ const props = defineProps({
   onPopupShow: { type: Function, required: false },
   onPopupHide: { type: Function, required: false }
 });
+const modelValue = defineModel({ type: null });
+const attrs = useAttrs();
+const light = useLight();
+const L_KEYS = ["required", "onFilter"];
 const normalizeOption = (option) => {
   if (typeof option === "string" || typeof option === "number") {
     return { label: String(option), value: String(option) };
@@ -115,21 +123,17 @@ const normalizeOption = (option) => {
   return option;
 };
 const normalizeOptions = (options) => {
-  if (!options) {
-    return [];
-  }
-  if (Array.isArray(options)) {
-    return options.map((option) => normalizeOption(option));
-  }
+  if (!options) return [];
+  if (Array.isArray(options)) return options.map(normalizeOption);
   if (typeof options === "object") {
-    return Object.keys(options).map((value) => ({
-      label: options[value],
-      value
-    }));
+    return Object.keys(options).map((value) => ({ label: options[value], value }));
   }
   return [];
 };
 const select_options = ref(normalizeOptions(props.options || []));
+watch(() => props.options, (opts) => {
+  select_options.value = normalizeOptions(opts || []);
+});
 const filterFn = (val, update, abort) => {
   if (props.onFilter) {
     props.onFilter(val, update, abort);
@@ -150,15 +154,30 @@ const filterFn = (val, update, abort) => {
     });
   });
 };
-const attrs = useAttrs();
-const localClass = computed(() => {
-  if (attrs.class) {
-    return attrs.class;
-  }
-  return "col-12";
+const base = useLightInputDefaults(props, attrs, L_KEYS);
+const selectProps = computed(() => {
+  const result = {
+    ...base.value,
+    // label/hint already translated by composable
+    options: select_options.value,
+    onFilter: filterFn
+  };
+  if (props.required && result.label)
+    result.label = "* " + result.label;
+  return result;
+});
+const selectRef = ref();
+defineExpose({
+  validate: () => selectRef.value?.validate(),
+  focus: () => selectRef.value?.focus(),
+  reset: () => selectRef.value?.reset()
 });
 </script>
 
 <template>
-    <q-select v-bind="$light.getInputProps($props)" :options="select_options" @filter="filterFn" :class="localClass" />
+    <q-select ref="selectRef" v-model="modelValue" v-bind="selectProps">
+        <template v-for="(_, name) in $slots" #[name]="slotProps" :key="name">
+            <slot :name="name" v-bind="slotProps ?? {}" />
+        </template>
+    </q-select>
 </template>

package/dist/runtime/components/L/Select.vue.d.ts

@@ -0,0 +1,46 @@
+import type { QSelectProps } from "quasar";
+export interface LSelectProps extends QSelectProps {
+    required?: boolean;
+}
+type __VLS_Props = LSelectProps;
+type __VLS_ModelProps = {
+    modelValue?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_11: string, __VLS_12: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_11>]?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    validate: () => any;
+    focus: () => any;
+    reset: () => any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    dark: boolean | null;
+    rounded: boolean;
+    square: boolean;
+    dense: boolean;
+    outlined: boolean;
+    optionValue: string | ((option: string | any) => any);
+    filled: boolean;
+    stackLabel: boolean;
+    standout: string | boolean;
+    hideBottomSpace: boolean;
+    emitValue: boolean;
+    mapOptions: boolean;
+    inputDebounce: string | number;
+    optionLabel: string | ((option: string | any) => string);
+    optionsDark: boolean | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,75 @@
+<script setup>
+import { ref } from "vue";
+import { q, m } from "#imports";
+import { useQuasar } from "quasar";
+const $q = useQuasar();
+const [{ eventLogCleanup }, { userLogCleanup }] = await Promise.all([
+  q({ eventLogCleanup: { enabled: true, days: true } }),
+  q({ userLogCleanup: { enabled: true, days: true } })
+]);
+const eventLog = ref({ enabled: eventLogCleanup.enabled, days: eventLogCleanup.days || 30 });
+const userLog = ref({ enabled: userLogCleanup.enabled, days: userLogCleanup.days || 30 });
+const retentionOptions = [
+  { label: "7 days", value: 7 },
+  { label: "14 days", value: 14 },
+  { label: "30 days", value: 30 },
+  { label: "60 days", value: 60 },
+  { label: "90 days", value: 90 },
+  { label: "180 days", value: 180 },
+  { label: "1 year", value: 365 }
+];
+const onSave = async (type) => {
+  try {
+    if (type === "eventLog") {
+      await m("setEventLogCleanup", { enabled: eventLog.value.enabled, days: eventLog.value.days });
+    } else {
+      await m("setUserLogCleanup", { enabled: userLog.value.enabled, days: userLog.value.days });
+    }
+    $q.notify({ type: "positive", message: "Log cleanup settings saved" });
+  } catch (e) {
+    $q.dialog({ title: "Error", message: e.message });
+  }
+};
+</script>
+
+<template>
+    <q-tab-panel name="logs" class="q-pa-lg">
+
+        <!-- Event Log -->
+        <div class="text-h6 q-mb-md">{{ $t("Event Log") }}</div>
+        <q-card flat bordered class="q-pa-md q-mb-lg" style="max-width: 480px">
+            <q-card-section>
+                <q-toggle v-model="eventLog.enabled" :label="$t('Enable nightly auto-cleanup')" color="primary" />
+                <div class="text-caption text-grey q-mt-xs q-ml-lg">
+                    {{ $t("A MySQL Event Scheduler runs daily at midnight to remove old logs.") }}
+                </div>
+            </q-card-section>
+            <q-card-section>
+                <q-select v-model="eventLog.days" :options="retentionOptions" emit-value map-options
+                    :label="$t('Keep logs for')" outlined dense :disable="!eventLog.enabled" />
+            </q-card-section>
+            <q-card-actions align="right">
+                <q-btn color="primary" :label="$t('Save')" unelevated @click="onSave('eventLog')" />
+            </q-card-actions>
+        </q-card>
+
+        <!-- User Log -->
+        <div class="text-h6 q-mb-md">{{ $t("User Log") }}</div>
+        <q-card flat bordered class="q-pa-md" style="max-width: 480px">
+            <q-card-section>
+                <q-toggle v-model="userLog.enabled" :label="$t('Enable nightly auto-cleanup')" color="primary" />
+                <div class="text-caption text-grey q-mt-xs q-ml-lg">
+                    {{ $t("A MySQL Event Scheduler runs daily at midnight to remove old logs.") }}
+                </div>
+            </q-card-section>
+            <q-card-section>
+                <q-select v-model="userLog.days" :options="retentionOptions" emit-value map-options
+                    :label="$t('Keep logs for')" outlined dense :disable="!userLog.enabled" />
+            </q-card-section>
+            <q-card-actions align="right">
+                <q-btn color="primary" :label="$t('Save')" unelevated @click="onSave('userLog')" />
+            </q-card-actions>
+        </q-card>
+
+    </q-tab-panel>
+</template>