@hostlink/nuxt-light 1.26.2 → 1.26.4

package/dist/module.json

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

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

@@ -1,21 +1,31 @@
 <script setup lang="ts">
 import { useLight } from '#imports';
+import { QBar } from 'quasar';
 import type { QBarProps } from 'quasar';
-import { computed } from 'vue';
+import { h, computed, useSlots } from 'vue';
+export interface LBarProps extends QBarProps {
+    color?: string;
+    textColor?: string;
+}
 
-export type LBarProps = QBarProps;
+const props = withDefaults(defineProps<LBarProps>(), {
+    color: undefined,
+    textColor: "white"
+});
 
 const light = useLight();
 const barClass = computed(() => {
-    const c = ["text-white"];
-    const color = light.color;
+    const c = [`text-${props.textColor}`];
+    const color = props.color || light.color;
     c.push(`bg-${color}`);
     return c;
 });
+
+const root = h(QBar, {
+    ...props,
+}, useSlots()) as any;
 </script>
 
 <template>
-    <q-bar :class="barClass">
-        <slot></slot>
-    </q-bar>
+    <component :is="root" :class="barClass" />
 </template>

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

@@ -1,8 +1,8 @@
-<script setup lang="ts">
-import { useRouter } from "vue-router";
+<script lang="ts" setup>
+import { h, useSlots } from "vue";
+import { useQuasar, QBtn } from "quasar";
+import { useLight } from "#imports";
 import type { QBtnProps } from "quasar";
-import { useQuasar } from "quasar";
-const router = useRouter();
 
 export interface LBtnProps extends QBtnProps {
     permission?: string;
@@ -10,33 +10,37 @@ export interface LBtnProps extends QBtnProps {
     confirmTitle?: string;
 }
 
-const $q = useQuasar();
 const props = withDefaults(defineProps<LBtnProps>(), {
     permission: "",
     confirmMessage: "",
     confirmTitle: "Confirm",
 });
 
-const onClick = function () {
-    const args = arguments;
-    if (props.confirmMessage) {
-        $q.dialog({
-            title: props.confirmTitle,
-            message: props.confirmMessage,
-            ok: "Yes",
-            cancel: "No",
-        }).onOk(() => {
-            props.onClick?.apply(null, args);
-        });
-    } else {
-        props.onClick?.apply(null, args);
-    }
-};
+const $light = useLight();
+const $q = useQuasar();
+const slots = useSlots() as ReturnType<typeof useSlots>;
 
+const root = h(QBtn, {
+    ...props,
+    ...$light.getButtonProps(props),
+    onClick: function () {
+        const args = arguments;
+        if (props.confirmMessage) {
+            $q.dialog({
+                title: props.confirmTitle,
+                message: props.confirmMessage,
+                ok: "Yes",
+                cancel: "No",
+            }).onOk(() => {
+                props.onClick?.apply(null, args as any);
+            });
+        } else {
+            props.onClick?.apply(null, args as any);
+        }
+    },
+}, slots);
 
 </script>
 <template>
-    <q-btn v-if="$light.isGranted(permission)" v-bind="$light.getButtonProps($props)" @click.capture.stop="onClick">
-        <slot></slot>
-    </q-btn>
+    <component :is="root" v-if="$light.isGranted($props.permission)"/>
 </template>

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

@@ -8,6 +8,7 @@ const { humanStorageSize } = format
 const light = useLight();
 const i18n = useI18n();
 const $q = useQuasar();
+const $light = useLight();
 
 const emit = defineEmits(["input", "close"]);
 
@@ -324,10 +325,14 @@ const onDeleteSelected = () => {
 
 }
 
+
+
 const onNewFolder = () => {
   $q.dialog({
+    color: $light.color,
     title: "New Folder",
     prompt: {
+      
       model: "",
       label: "Name",
       isValid: (val) => {
@@ -660,7 +665,7 @@ selectedNodePath.value = drives[0].index.toString();
         <q-list padding class="text-grey-8">
           <q-item>
             <q-item-section>
-              <q-btn icon="add" label="New" :disable="!selectedNodePath" :color="$light.color">
+              <l-btn icon="add" label="New" :disable="!selectedNodePath" :color="$light.color">
                 <q-menu>
                   <q-list>
                     <q-item clickable v-close-popup @click="onNewFolder" v-if="permission.includes('fs.folder.create')">
@@ -679,7 +684,7 @@ selectedNodePath.value = drives[0].index.toString();
                     </q-item>
                   </q-list>
                 </q-menu>
-              </q-btn>
+              </l-btn>
             </q-item-section>
           </q-item>
 

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

@@ -1,18 +1,13 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import { useLight } from '#imports';
 import { type QSelectProps } from "quasar";
-import { useI18n } from "vue-i18n";
 
 const emits = defineEmits(["update:modelValue"]);
 
-const { t } = useI18n();
-const light = useLight();
 interface LSelectProps extends QSelectProps {
     required?: boolean,
 }
 
-
 const props = withDefaults(defineProps<LSelectProps>(), {
     rules: () => {
         return []
@@ -30,6 +25,7 @@ const props = withDefaults(defineProps<LSelectProps>(), {
     dense: undefined,
     square: undefined,
     stackLabel: undefined,
+    hideBottomSpace:true
 
 })
 
@@ -112,5 +108,5 @@ const localValue = computed({
 </script>
 <template>
     <q-select v-bind="$light.getInputProps($props)" v-model="localValue" :options="select_options" @filter="filterFn"
-        :option-label="optionLabel" hide-bottom-space :rules="rules" :clearable="clearable" />
+        :option-label="optionLabel" :rules="rules" :clearable="clearable" />
 </template>

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

@@ -37,12 +37,32 @@ const localValue = computed<string | null | undefined>({
     }
 });
 
-const rules: ValidationRule[] = ["timeOrFulltime"];
+const rules: ValidationRule[] = [];
 //const rules = [];
 if (props.required) {
-    rules.push(val => !!val || 'Required.');
+    rules.push((v: any) => !!v || t("This field is required"));
 }
 
+//check time format
+rules.push((v: any) => {
+    if (v) {
+        const time = v.split(":");
+        if (time.length == 2) {
+            if (time[0] >= 0 && time[0] <= 23 && time[1] >= 0 && time[1] <= 59) {
+                return true;
+            }
+        }
+        if (time.length == 3) {
+            if (time[0] >= 0 && time[0] <= 23 && time[1] >= 0 && time[1] <= 59 && time[2] >= 0 && time[2] <= 59) {
+                return true;
+            }
+        }
+        return t("Invalid time format");
+    }
+    return true;
+});
+
+
 </script>
 <template>
     <q-input v-bind="$light.getInputProps(props)" v-model="localValue" :rules="rules" :color="$light.color"

package/dist/runtime/formkit/TimePicker.vue

@@ -25,7 +25,7 @@ const label = computed(() => {
 </script>
 <template>
     <l-time-picker v-model="value" v-bind="context.attrs" :label="label" :error="error" :type="context.inputType"
-        :error-message="errorMessage">
+        :error-message="errorMessage" >
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>
         </template>

package/package.json

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