@hostlink/nuxt-light 1.67.7 → 1.67.8

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.67.7",
+  "version": "1.67.8",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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

@@ -1,6 +1,5 @@
 export interface LTimePickerProps {
     modelValue?: any;
-    required?: boolean;
     label?: string;
     hint?: string;
     nowBtn?: boolean;
@@ -27,7 +26,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
     format24h: boolean;
-    required: boolean;
     hideBottomSpace: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -7,7 +7,6 @@ const { t } = useI18n();
 const modelValue = defineModel({ type: null });
 const props = defineProps({
   modelValue: { type: null, required: false },
-  required: { type: Boolean, required: false, default: false },
   label: { type: String, required: false },
   hint: { type: String, required: false },
   nowBtn: { type: Boolean, required: false },
@@ -30,9 +29,6 @@ const inputProps = computed(() => ({
 }));
 const rules = computed(() => {
   const r = [];
-  if (props.required) {
-    r.push((v) => !!v || t("This field is required"));
-  }
   r.push((v) => {
     if (!v) return true;
     const parts = v.split(":");

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

@@ -1,6 +1,5 @@
 export interface LTimePickerProps {
     modelValue?: any;
-    required?: boolean;
     label?: string;
     hint?: string;
     nowBtn?: boolean;
@@ -27,7 +26,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
     format24h: boolean;
-    required: boolean;
     hideBottomSpace: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/formkit/Checkbox.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useErrorMessage } from "./useErrorMessage";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 const props = defineProps({
   context: Object
 });
@@ -8,7 +8,9 @@ const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
 });
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
 </script>
 
 <template>

package/dist/runtime/formkit/DatePicker.vue

@@ -1,19 +1,30 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 const props = defineProps({
   context: Object
 });
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
 });
+const onBlur = () => {
+  if (errorMessage.value) {
+    error.value = true;
+  } else {
+    error.value = false;
+  }
+};
 </script>
 
 <template>
-    <l-date-picker v-model="value" v-bind="context.attrs" :label="context.label" :error="error"
-        :type="context.inputType" :error-message="errorMessage" :disable="context.disabled">
+    <l-date-picker v-model="value" v-bind="context.attrs" :label="label" :error="error"
+        :type="context.inputType" :error-message="errorMessage" :disable="context.disabled" @blur="onBlur">
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>
         </template>

package/dist/runtime/formkit/Editor.vue

@@ -1,10 +1,14 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 const props = defineProps({
   context: Object
 });
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
@@ -12,7 +16,7 @@ const value = computed({
 </script>
 
 <template>
-    <l-editor v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
+    <l-editor v-model="value" :label="label" v-bind="context.attrs" :error="error" :type="context.inputType"
         :error-message="errorMessage">
         <slot></slot>
         <!-- <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">

package/dist/runtime/formkit/File.vue

@@ -1,11 +1,15 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 import { useLight } from "#imports";
 const props = defineProps({
   context: Object
 });
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
@@ -27,7 +31,7 @@ const attrs = computed(() => {
 </script>
 
 <template>
-    <q-file v-model="value" :label="context.label" v-bind="attrs" :error="error" :error-message="errorMessage"
+    <q-file v-model="value" :label="label" v-bind="attrs" :error="error" :error-message="errorMessage"
         @blur="onBlur" hide-bottom-space>
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>

package/dist/runtime/formkit/FilePicker.vue

@@ -1,12 +1,14 @@
 <script setup>
 import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 const props = defineProps({
   context: Object
 });
 const error = ref(false);
 const errorMessage = ref("");
 useErrorMessage(props.context.node, error, errorMessage);
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
@@ -21,7 +23,7 @@ const onBlur = () => {
 </script>
 
 <template>
-    <l-file v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
+    <l-file v-model="value" :label="label" v-bind="context.attrs" :error="error" :type="context.inputType"
         :error-message="errorMessage" @blur="onBlur">
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>

package/dist/runtime/formkit/FileUpload.vue

@@ -1,12 +1,14 @@
 <script setup>
 import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 const props = defineProps({
   context: Object
 });
 const error = ref(false);
 const errorMessage = ref("");
 useErrorMessage(props.context.node, error, errorMessage);
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
@@ -21,7 +23,7 @@ const onBlur = () => {
 </script>
 
 <template>
-    <l-file-upload v-bind="context.attrs" v-model="value" :label="context.label" :error="error" :type="context.inputType"
+    <l-file-upload v-bind="context.attrs" v-model="value" :label="label" :error="error" :type="context.inputType"
         :error-message="errorMessage" @blur="onBlur">
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>

package/dist/runtime/formkit/GroupSelect.vue

@@ -1,10 +1,14 @@
 <script setup>
 import { useErrorMessage } from "./useErrorMessage";
-import { computed } from "vue";
+import { useRequiredLabel } from "./useRequiredLabel";
+import { computed, ref } from "vue";
 const props = defineProps({
   context: Object
 });
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
@@ -18,7 +22,7 @@ if (props.context.state.required) {
 </script>
 
 <template>
-    <l-group-select v-model="value" :label="context.label" v-bind="context.attrs" :error="error"
+    <l-group-select v-model="value" :label="label" v-bind="context.attrs" :error="error"
         :error-message="errorMessage"  :required="context.state.required"
         :disable="context.disabled">
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">

package/dist/runtime/formkit/Input.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 import { useI18n } from "vue-i18n";
 const props = defineProps({
   context: {
@@ -42,13 +43,7 @@ const onBlur = () => {
     error.value = false;
   }
 };
-const label = computed(() => {
-  let l = t(props.context.label);
-  if (props.context.state.required) {
-    l = "* " + l;
-  }
-  return l;
-});
+const label = useRequiredLabel(props.context, t);
 </script>
 
 <template>

package/dist/runtime/formkit/InputSelect.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 import { useI18n } from "vue-i18n";
 const props = defineProps({
   context: {
@@ -9,7 +10,9 @@ const props = defineProps({
   }
 });
 const { t } = useI18n();
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
 const value = computed({
   get: () => props.context?.value,
   set: (val) => props.context.node.input(val)
@@ -21,13 +24,7 @@ const onBlur = () => {
     error.value = false;
   }
 };
-const label = computed(() => {
-  let l = t(props.context.label);
-  if (props.context.state.required) {
-    l = "* " + l;
-  }
-  return l;
-});
+const label = useRequiredLabel(props.context, t);
 </script>
 
 <template>

package/dist/runtime/formkit/InputXlsx.vue

@@ -1,10 +1,14 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 const props = defineProps({
   context: Object
 });
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
@@ -12,7 +16,7 @@ const value = computed({
 </script>
 
 <template>
-    <l-input-xlsx v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
+    <l-input-xlsx v-model="value" :label="label" v-bind="context.attrs" :error="error" :type="context.inputType"
         :error-message="errorMessage">
         <slot></slot>
     </l-input-xlsx>

package/dist/runtime/formkit/OptionGroup.vue

@@ -1,12 +1,16 @@
 <script setup>
 import { useLight } from "#imports";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 const light = useLight();
 const props = defineProps({
   context: Object
 });
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
@@ -17,7 +21,7 @@ const outlined = computed(() => {
 </script>
 
 <template>
-    <l-field stack-label :label="context.label" :error="error" :error-message="errorMessage" :outlined="outlined"
+    <l-field stack-label :label="label" :error="error" :error-message="errorMessage" :outlined="outlined"
         hide-bottom-space>
         <q-option-group type="checkbox" :options="context.options" v-model="value" inline v-bind="context.attrs">
         </q-option-group>

package/dist/runtime/formkit/Radio.vue

@@ -1,10 +1,12 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
 const props = defineProps({
   context: Object
 });
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)

package/dist/runtime/formkit/Select.vue

@@ -1,10 +1,14 @@
 <script setup>
 import { useErrorMessage } from "./useErrorMessage";
-import { computed } from "vue";
+import { useRequiredLabel } from "./useRequiredLabel";
+import { computed, ref } from "vue";
 const props = defineProps({
   context: Object
 });
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
@@ -18,7 +22,7 @@ if (props.context.state.required) {
 </script>
 
 <template>
-    <l-select v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :error-message="errorMessage"
+    <l-select v-model="value" :label="label" v-bind="context.attrs" :error="error" :error-message="errorMessage"
         :clearable="clearable" :disable="context.disabled">
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>

package/dist/runtime/formkit/Textarea.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 import { useI18n } from "vue-i18n";
 const props = defineProps({
   context: {
@@ -9,7 +10,9 @@ const props = defineProps({
   }
 });
 const { t } = useI18n();
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
 const value = computed({
   get: () => props.context?.value,
   set: (val) => {
@@ -23,13 +26,7 @@ const onBlur = () => {
     error.value = false;
   }
 };
-const label = computed(() => {
-  let l = t(props.context.label);
-  if (props.context.state.required) {
-    l = "* " + l;
-  }
-  return l;
-});
+const label = useRequiredLabel(props.context, t);
 </script>
 
 <template>

package/dist/runtime/formkit/TimePicker.vue

@@ -1,19 +1,30 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 const props = defineProps({
   context: Object
 });
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
 });
+const onBlur = () => {
+  if (errorMessage.value) {
+    error.value = true;
+  } else {
+    error.value = false;
+  }
+};
 </script>
 
 <template>
-    <l-time-picker v-model="value" v-bind="context.attrs" :label="context.label" :error="error" :type="context.inputType"
-        :error-message="errorMessage" :disable="context.disabled" :required="context.state.required">
+    <l-time-picker v-model="value" v-bind="context.attrs" :label="label" :error="error" :type="context.inputType"
+        :error-message="errorMessage" :disable="context.disabled" @blur="onBlur">
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>
         </template>

package/dist/runtime/formkit/Toggle.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { computed } from "vue";
+import { useRequiredLabel } from "./useRequiredLabel";
 const props = defineProps({
   context: Object
 });
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
@@ -10,7 +12,7 @@ const value = computed({
 </script>
 
 <template>
-    <q-toggle v-model="value" :label="context.label" :disable="context.disabled" v-bind="context.attrs">
+    <q-toggle v-model="value" :label="label" :disable="context.disabled" v-bind="context.attrs">
         <slot></slot>
     </q-toggle>
 </template>

package/dist/runtime/formkit/useRequiredLabel.d.ts

@@ -0,0 +1 @@
+export declare function useRequiredLabel(context: any, t?: (val: string) => string): import("vue").ComputedRef<any>;

package/dist/runtime/formkit/useRequiredLabel.js

@@ -0,0 +1,10 @@
+import { computed } from "vue";
+export function useRequiredLabel(context, t) {
+  return computed(() => {
+    let l = t ? t(context.label) : context.label;
+    if (context.state?.required) {
+      l = "* " + l;
+    }
+    return l;
+  });
+}

package/package.json

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