@hostlink/nuxt-light 1.15.2 → 1.15.3

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.15.2",
+  "version": "1.15.3",
   "builder": {
     "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.0.0"

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

@@ -344,7 +344,7 @@ if (route.fullPath == "/" && my.default_page) {
 
                 <q-btn flat round dense icon="sym_o_person" class="q-mr-sm">
                     <q-menu max-width="250px">
-                        <q-list>
+                        <q-list >
                             <q-item v-close-popup to="/User/profile">
                                 <q-item-section avatar>
                                     <q-icon name="sym_o_person" />

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

@@ -2,11 +2,13 @@
 import { ref, computed } from "vue";
 import { useLight } from '#imports';
 
-import { type QDateProps } from "quasar";
+import { date, type QDateProps, type QInputProps } from "quasar";
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 
+const modelValue = defineModel<string | DateRange | null | undefined>();
+
 interface DateRange {
     from: string,
     to: string
@@ -14,7 +16,6 @@ interface DateRange {
 
 
 export interface LDatePickerProps {
-    modelValue?: string | DateRange
     label?: string
     required?: boolean
     hideBottomSpace?: boolean
@@ -40,67 +41,59 @@ const props = withDefaults(defineProps<LDatePickerProps>(), {
     square: undefined,
     stackLabel: undefined,
     mask: "YYYY-MM-DD",
+    range: false
 })
 
 
 const light = useLight();
 
-const emit = defineEmits<{
-    (e: 'update:modelValue', value?: string | object): void
-}>();
-
 const popup = ref<any>(null);
 const localValue = computed({
     get: () => {
-        //if is object
-        if (props.modelValue) {
-            if (typeof props.modelValue == "object") {
-                return props.modelValue.from + " - " + props.modelValue.to
+        if (modelValue.value) {
+            if (typeof modelValue.value == "object") {
+                return modelValue.value.from + " - " + modelValue.value.to
             }
         }
 
-        return props.modelValue
+        return modelValue.value
     },
-    set: (value) => {
-        if (value == null) {
-            emit('update:modelValue', value)
-            return;
-        }
-
-        //is object
-        if (typeof value == "object") {
-            emit('update:modelValue', value)
-            return;
-        }
+    set: (value: string) => {
+        
 
         if (props.range) {
-
             //try to split
             const parts = value.split(" - ");
             if (parts.length == 2) {
                 const from = parts[0];
                 const to = parts[1];
                 if (from.match(/^\d{4}-\d{2}-\d{2}$/) && to.match(/^\d{4}-\d{2}-\d{2}$/)) {
-                    emit('update:modelValue', { from, to })
+                    modelValue.value = { from, to }
                     return;
                 }
             }
         }
 
-        emit('update:modelValue', value)
+        if (value.match(/^\d{4}-\d{2}-\d{2}$/)) {
+            modelValue.value = value;
+            return;
+        }
+
+
+        modelValue.value = null;
     }
 });
 
 const dateValue = computed({
     get: () => {
-        return props.modelValue
+        return modelValue
     },
-    set: (value) => {
+    set: (value: string) => {
         if (popup.value) {
             popup.value.hide();
         }
-        (localValue as any).value = value;
-        emit('update:modelValue', value)
+        localValue.value = value;
+        modelValue.value = value;
     }
 });
 
@@ -126,7 +119,11 @@ if (!props.range) {
 }
 
 const input_attrs = computed(() => {
-    let a = { ...props }
+    let a: QInputProps = {
+        modelValue: localValue.value,
+        ...props
+    }
+
     a.rules = rules;
     a.mask = props.range ? "####-##-## - ####-##-##" : "####-##-##"
 

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

@@ -1,64 +1,84 @@
-<script setup>
+<script setup lang="ts">
 import { computed, ref, useAttrs } from "vue";
-import { useLight } from '../';
+import { useLight } from '#imports';
+import type { ValidationRule, QInputProps } from "quasar";
+import { useI18n } from "vue-i18n";
 const light = useLight();
+const { t } = useI18n();
+const modelValue = defineModel<string | null | undefined>();
 
-const props = defineProps({
-    modelValue: {
-        type: [String, Object],
-        required: false,
-        default: null
-    }, required: {
-        type: Boolean,
-        default: false
-    },
-    label: {
-        type: String,
-    },
-    hint: {
-        type: String,
-        default: ""
-    }
-});
+export interface LTimePickerProps {
+    modelValue?: string | null | undefined
+    required?: boolean
+    label?: string
+    hint?: string
+    nowBtn?: boolean
+    withSeconds?: boolean
+    format24h?: boolean
+    mask?: string
+    hideBottomSpace?: boolean
+}
+
+const props = withDefaults(defineProps<LTimePickerProps>(), {
+    required: false,
+    format24h: true,
+    mask: "time",
+    hideBottomSpace: true
+})
 
-const emit = defineEmits(["update:modelValue"]);
 const popup = ref(null);
-const localValue = computed({
-    get: () => props.modelValue,
-    set: (value) => {
-        //  popup.value.hide();
-        emit('update:modelValue', value)
+const localValue = computed<string | null | undefined>({
+    get: (): string | null | undefined => {
+        return modelValue.value;
+    },
+    set: (value: string | null | undefined) => {
+        modelValue.value = value;
     }
 });
 
-const rules = ["timeOrFulltime"];
+const rules: ValidationRule[] = ["timeOrFulltime"];
 //const rules = [];
 if (props.required) {
     rules.push(val => !!val || 'Required.');
 }
 
 
-const attrs = {
-    ...{
+const input_attrs = computed(() => {
+
+    let attrs: QInputProps = {
+        modelValue: localValue.value,
         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(),
-}
+        stackLabel: light.getStyle("inputStackLabel"),
+    }
+
+    if (props.label) {
+        attrs.label = t(props.label);
+    }
+
+    if (props.hint) {
+        attrs.hint = t(props.hint);
+    }
 
+    if (props.mask) {
+        attrs.mask = props.mask;
+    }
+    return attrs;
+})
 
 </script>
 <template>
-    <q-input v-bind="attrs" v-model="localValue" mask="time" :rules="rules" :label="$t(label)" :hint="$t(hint)">
+    <q-input v-bind="input_attrs" v-model="localValue" :rules="rules" :color="$light.color"
+        :hide-bottom-space="hideBottomSpace">
         <template v-slot:prepend>
             <q-btn icon="sym_o_access_time" round dense flat>
                 <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">
-                    <q-time v-model="localValue" format24h>
+                    <q-time v-model="localValue" :format24h="format24h" :color="$light.color" :now-btn="nowBtn"
+                        :with-seconds="withSeconds">
                         <div class="row items-center justify-end">
                             <q-btn v-close-popup label="Close" :color="$light.color" flat />
                         </div>

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

@@ -46,7 +46,8 @@ eventLogCols.forEach(col => {
 
 </script>
 <template>
-    <l-page title="User profile">
+    <l-page title="User profile" gutter="sm">
+
         <template #header>
             <l-btn icon="sym_o_password" to="setting/password" label="Update password" />
             <l-btn icon="sym_o_key" to="setting/two-factor-auth" label="Two factor auth" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.15.2",
+  "version": "1.15.3",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",