@hostlink/nuxt-light 1.0.5 → 1.0.7

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.0.5"
+  "version": "1.0.7"
 }

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { type QBannerProps, type QBannerSlots } from 'quasar'
+import { computed, useSlots } from 'vue'
+
+export interface LBannerProps extends QBannerProps {
+    icon?: string
+    type?: 'primary' | 'secondary' | 'accent' | 'dark' | 'positive' | 'negative' | 'info' | 'warning'
+}
+
+const props = withDefaults(defineProps<LBannerProps>(), {
+    rounded: true,
+    type: 'primary'
+});
+
+const classes = computed(() => {
+    return [
+        `bg-${props.type}`,
+        'text-white'
+    ]
+});
+
+const localIcon = computed(() => {
+    if (props.icon) return props.icon
+    if (props.type === 'info') return 'sym_o_info'
+    if (props.type === 'warning') return 'sym_o_warning'
+    if (props.type === 'positive') return 'sym_o_check_circle_outline'
+    if (props.type === 'negative') return 'sym_o_error'
+});
+
+const slots = computed(() => useSlots());
+</script>
+
+<template>
+    <q-banner v-bind="props" :class="classes">
+        <template v-slot:avatar v-if="localIcon">
+            <q-icon :name="localIcon" />
+        </template>
+
+        <template v-for="(s, name) in slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
+        </template>
+    </q-banner>
+</template>

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

@@ -1,14 +1,14 @@
-<script setup>
-import { ref, useAttrs } from "vue";
-import { q, f, useLight } from '../';
+<script setup lang="ts">
+import { type QBtnProps } from "quasar";
+import { ref, computed } from "vue";
+import { q, f, useLight } from '#imports';
 
-const props = defineProps(["label", "permission"]);
-
-const label = ref(props.label);
-if (!label.value) {
-    label.value = "";
+export interface LBtnProps extends QBtnProps {
+    permission?: string;
 }
 
+const props = defineProps<LBtnProps>();
+
 const light = useLight();
 
 const granted = ref(false);
@@ -22,22 +22,22 @@ if (props.permission) {
     granted.value = true;
 }
 
-
-const attrs = {
-    ...{
-        rounded: light.getStyle("buttonRounded", true),
-        outline: light.getStyle("buttonOutline", true),
-        unelevated: light.getStyle("buttonUnelevated", false),
-        dense: light.getStyle("buttonDense", false),
-    },
-    ...useAttrs(),
-}
+const attrs = computed(() => {
+    return {
+        ...{
+            rounded: light.getStyle("buttonRounded"),
+            outline: light.getStyle("buttonOutline"),
+            unelevated: light.getStyle("buttonUnelevated"),
+            dense: light.getStyle("buttonDense"),
+        },
+        ...props,
+    }
+});
 
 
 </script>
 <template>
-    <q-btn v-bind="attrs" color="primary" v-if="granted" :label="$t(label)">
-
+    <q-btn v-bind="attrs" color="primary" v-if="granted">
         <slot></slot>
     </q-btn>
 </template>

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

@@ -1,21 +1,27 @@
-<script setup>
-import { useLight } from '../'
-import { useAttrs, ref, computed } from 'vue'
+<script setup lang="ts">
+import { useLight } from '#imports'
+import { ref, computed } from 'vue'
+import { type QCardProps } from 'quasar';
 
-defineProps({
-    loading: Boolean,
-    title: String
-})
+export interface LCardProps extends QCardProps {
+    loading?: boolean;
+    title?: string;
+}
 
 const light = useLight();
+const props = withDefaults(defineProps<LCardProps>(), {
+    flat: undefined,
+    bordered: undefined,
+    square: undefined,
+});
 
-const attrs = {
-    ...{
-        flat: light.getStyle("cardFlat", true),
-        bordered: light.getStyle("cardBordered", true),
-        square: light.getStyle("cardSquare", false),
-    }, ...useAttrs()
-}
+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;
+});
 
 const cl = computed(() => {
     const c = ["text-white"];

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

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

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

@@ -1,29 +1,17 @@
-<script setup>
+<script setup lang="ts">
 import { ref, computed, useAttrs } from "vue";
-import { useLight } from '../';
+import { useLight } from '#imports';
 
+import { type QDateProps } from "quasar";
 
-const light = useLight();
+export interface LDatePickerProps extends QDateProps {
+    label?: string
+    required?: boolean
+}
 
-const props = defineProps({
-    modelValue: {
-        type: [String, Object],
-        required: false,
-        default: null
-    },
-    range: {
-        type: Boolean,
-        default: false
-    },
-    label: {
-        type: String,
-        default: ""
-    },
-    required: {
-        type: Boolean,
-        default: false
-    },
-});
+const props = defineProps<LDatePickerProps>()
+
+const light = useLight();
 
 const emit = defineEmits(["update:modelValue"]);
 const popup = ref(null);
@@ -37,16 +25,19 @@ const localValue = computed({
         return props.modelValue
     },
     set: (value) => {
-        popup.value.hide();
+        if (popup.value) {
+            popup.value.hide();
+        }
+
         emit('update:modelValue', value)
     }
 
 });
 
-const rules = [];
+const rules: any = [];
 
 if (props.required) {
-    rules.push((val) => {
+    rules.push((val: any) => {
         if (!val) {
             return "Required";
         }
@@ -54,7 +45,7 @@ if (props.required) {
 }
 
 if (!props.range) {
-    rules.push((val) => {
+    rules.push((val: any) => {
         //check val is YYYY-MM-DD
         if (val) {
             if (!val.match(/^\d{4}-\d{2}-\d{2}$/)) {
@@ -65,23 +56,21 @@ if (!props.range) {
 }
 
 const attrs = {
-    ...{
-        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(),
+    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")
 }
 
 const mask = props.range ? "####-##-## - ####-##-##" : "####-##-##";
 
 </script>
 <template>
-    <q-input v-bind="attrs" v-model="localValue" :rules="rules" :label="$t(label)" hide-bottom-space :mask="mask">
+    <q-input v-bind="attrs" :label="$t(props.label ?? '')" v-model="localValue" :rules="rules" hide-bottom-space
+        :mask="mask">
         <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">

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

@@ -343,19 +343,29 @@ const onUploadFiles = async () => {
     message: "Uploading files...",
   });
 
-  for (let file of uploadFiles.value) {
-
-    await m("fsUploadFile", {
-      path: path.value,
-      file: new VariableType("file")
-    }, [{
-      __variables: {
-        file: {
-          type: "Upload!",
-          value: file
+  try {
+    for (let file of uploadFiles.value) {
+
+      await m("fsUploadFile", {
+        path: path.value,
+        file: new VariableType("file")
+      }, [{
+        __variables: {
+          file: {
+            type: "Upload!",
+            value: file
+          }
         }
-      }
-    }]);
+      }]);
+    }
+  } catch (e) {
+    quasar.dialog({
+      title: "Error",
+      message: e.message,
+    });
+
+    return;
+
   }
   uploadFiles.value = [];
 

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

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { VariableType } from "json-to-graphql-query";
+import { ref, computed, useAttrs } from "vue";
+import { useLight, m } from '#imports';
+import { Loading, Dialog } from "quasar";
+
+const light = useLight();
+
+export interface LFileProps {
+    modelValue?: string;
+    label?: string;
+    filled?: boolean;
+    outlined?: boolean;
+    standout?: boolean;
+    rounded?: boolean;
+    dense?: boolean;
+    square?: boolean;
+    stackLabel?: boolean;
+    path?: string;
+    accept?: string;
+}
+
+const props = withDefaults(defineProps<LFileProps>(), {
+    filled: undefined,
+    outlined: undefined,
+    standout: undefined,
+    rounded: undefined,
+    dense: undefined,
+    square: undefined,
+    stackLabel: undefined,
+    path: "",
+    accept: "*",
+});
+
+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;
+});
+
+const uploadFile = ref(null);
+
+const onUploadFile = async () => {
+    Loading.show({
+        message: "Uploading file...",
+    });
+
+    try {
+        localValue.value = await m("fsUploadFile", {
+            path: props.path,
+            file: new VariableType("file"),
+            rename: true
+        }, [{
+            __variables: {
+                file: {
+                    type: "Upload!",
+                    value: uploadFile.value
+                }
+            }
+        }]);
+        Loading.hide();
+
+        show.value = false;
+        uploadFile.value = null;
+        return;
+    } catch (e: any) {
+        Dialog.create({
+            title: "Error",
+            message: e.message,
+        });
+    }
+
+
+    Loading.hide();
+}
+
+</script>
+<template>
+    <q-input v-bind="attrs" v-model="localValue" 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="Files"></q-file>
+                </q-card-section>
+
+                <q-card-actions align="right">
+                    <q-btn flat label="Cancel" color="primary" v-close-popup></q-btn>
+                    <q-btn flat label="Upload" color="primary" @click="onUploadFile"></q-btn>
+                </q-card-actions>
+            </l-card>
+        </q-dialog>
+        <template v-slot:prepend>
+            <q-btn dense flat round icon="sym_o_file_upload" @click="show = true"></q-btn>
+        </template>
+    </q-input>
+</template>

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

@@ -1,20 +1,36 @@
-<script setup>
+<script setup lang="ts">
 import { ref, computed, useAttrs } from "vue";
-import { useLight } from '../';
+import { useLight } from '#imports';
 
 const light = useLight();
 
-const props = defineProps({
-    modelValue: {
-        type: String
-    },
+export interface LFileProps {
+    modelValue?: string;
+    label?: string;
+    filled?: boolean;
+    outlined?: boolean;
+    standout?: boolean;
+    rounded?: boolean;
+    dense?: boolean;
+    square?: boolean;
+    stackLabel?: boolean;
+}
+
+const props = withDefaults(defineProps<LFileProps>(), {
+    filled: undefined,
+    outlined: undefined,
+    standout: undefined,
+    rounded: undefined,
+    dense: undefined,
+    square: undefined,
+    stackLabel: undefined,
 });
 
 const emit = defineEmits(["update:modelValue"]);
 
 const show = ref(false);
 
-const onInput = (value) => {
+const onInput = (value: string) => {
     localValue.value = value;
     show.value = false;
 
@@ -25,19 +41,22 @@ const localValue = computed({
     set: (value) => emit("update:modelValue", value),
 })
 
-const attrs = {
-
-    ...{
-        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(),
-}
+
+
+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;
+});
+
+
+
 </script>
 <template>
     <q-input v-bind="attrs" v-model="localValue" hide-bottom-space>

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

@@ -1,8 +1,8 @@
 <script setup>
-import { computed, ref, useAttrs, useSlots } from "vue";
+import { computed, ref, useAttrs } from "vue";
 import { useI18n } from 'vue-i18n';
 import tc2sc from "../lib/tc2sc";
-import { useLight } from '../';
+import { useLight } from '#imports';
 
 const i18n = useI18n();
 const light = useLight();
@@ -165,10 +165,6 @@ const attrs = {
     ...useAttrs(),
 }
 
-const ss = Object.entries(useSlots()).map(([key, value]) => {
-    return key;
-});
-
 </script>
 <template>
     <q-input v-bind="attrs" :label="localLabel" v-model="localValue" :rules="new_rules" hide-bottom-space :type="localType">
@@ -184,10 +180,11 @@ const ss = Object.entries(useSlots()).map(([key, value]) => {
             </q-btn>
         </template>
 
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
 
+
         <template v-if="localShowPassword" v-slot:append>
             <q-icon name="sym_o_visibility" class="cursor-pointer" :color="showPassword ? 'primary' : 'grey-5'"
                 @click="isShowPassword = false" v-if="isShowPassword" />

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

@@ -1,31 +1,35 @@
-<script setup>
-import { computed, ref, useAttrs } from "vue";
+<script setup lang="ts">
+import { computed, ref } from "vue";
 import { useLight } from '../';
+import { type QSelectProps } from "quasar";
+
+const emits = defineEmits(["update:modelValue"]);
 
 const light = useLight();
-const props = defineProps({
-    rules: {
-        type: Array,
-        default: () => []
-    },
-    required: {
-        type: Boolean,
-        default: false
+interface LSelectProps extends QSelectProps {
+    required?: boolean
+}
+
+
+const props = withDefaults(defineProps<LSelectProps>(), {
+    rules: () => {
+        return []
     },
-    options: {
-        type: Array,
-        default: () => []
+    options: () => {
+        return []
     },
-    optionLabel: {
-        type: String,
-        default: "label"
+    optionLabel: () => {
+        return "label"
     },
-    label: {
-        type: String,
-        default: ""
+    emitValue: () => {
+        return true
     },
+    mapOptions: () => {
+        return true
+    }
 })
 
+
 if (props.required) {
     props.rules.push((val) => {
         if (Number.isInteger(val)) {
@@ -49,31 +53,40 @@ const filterFn = (val, update, abort) => {
 
     update(() => {
         const needle = val.toLowerCase();
+
         select_options.value = props.options.filter(v => v[props.optionLabel].toLowerCase().indexOf(needle) > -1);
     })
 }
 
-
-
 const clearable = computed(() => {
     return !props.required;
 });
 
-const attrs = {
-    ...{
-        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(),
-}
+const attrs = computed(() => {
+    return {
+        ...{
+            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")
+        },
+        ...{
+            emitValue: props.emitValue,
+            mapOptions: props.mapOptions
+        }
+    }
+});
+
+const localValue = computed({
+    get: () => props.modelValue,
+    set: (value) => emits('update:modelValue', value)
+});
 
 </script>
 <template>
-    <q-select v-bind="attrs" :label="$t(label)" emit-value map-options :options="select_options" @filter="filterFn"
-        :option-label="optionLabel" hide-bottom-space :rules="rules" :clearable="clearable" />
+    <q-select v-bind="attrs" v-model="localValue" :label="$t(props.label ?? '')" :options="select_options"
+        @filter="filterFn" :option-label="optionLabel" hide-bottom-space :rules="rules" :clearable="clearable" />
 </template>

package/dist/runtime/formkit/Checkbox.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { getErrorMessage } from 'formkit-quasar';
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 const props = defineProps({
     context: Object
 });
@@ -10,18 +10,13 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-const ss = Object.entries(useSlots()).map(([key, value]) => {
-    return key;
-});
-
 const { error, errorMessage } = getErrorMessage(props.context.node);
 
-
 </script>
 <template>
     <l-checkbox v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :error-message="errorMessage">
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </l-checkbox>
 </template>

package/dist/runtime/formkit/DatePicker.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
 
 const props = defineProps({
@@ -13,13 +13,12 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-const ss = Object.entries(useSlots()).map(([key]) => key);
 </script>
 <template>
     <l-date-picker v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
         :error-message="errorMessage">
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </l-date-picker>
 </template>

package/dist/runtime/formkit/File.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
 import { useLight } from '#imports';
 
@@ -15,8 +15,6 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-const ss = Object.entries(useSlots()).map(([key]) => key);
-
 const onBlur = () => {
     if (errorMessage.value) {
         error.value = true
@@ -44,8 +42,8 @@ const attrs = {
 <template>
     <q-file v-model="value" :label="context.label" v-bind="attrs" :error="error" :error-message="errorMessage"
         @blur="onBlur">
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </q-file>
 </template>

package/dist/runtime/formkit/FilePicker.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
 
 const props = defineProps({
@@ -13,8 +13,6 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-const ss = Object.entries(useSlots()).map(([key]) => key);
-
 const onBlur = () => {
     if (errorMessage.value) {
         error.value = true
@@ -26,8 +24,8 @@ const onBlur = () => {
 <template>
     <l-file v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
         :error-message="errorMessage" @blur="onBlur">
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </l-file>
 </template>

package/dist/runtime/formkit/FileUpload.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { computed } from 'vue'
+import { getErrorMessage } from 'formkit-quasar';
+
+const props = defineProps({
+    context: Object
+});
+
+const { error, errorMessage } = getErrorMessage(props.context.node);
+
+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-file-upload v-model="value" :label="context.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>
+        </template>
+    </l-file-upload>
+</template>

package/dist/runtime/formkit/Input.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
 
 const props = defineProps({
@@ -10,10 +10,30 @@ const { error, errorMessage } = getErrorMessage(props.context.node);
 
 const value = computed({
     get: () => props.context.value,
-    set: (val) => props.context.node.input(val)
-})
+    set: (val) => {
+        if (props.context.number !== undefined) {
+            if (val === "") {
+                props.context.node.input(0)
+                return
+            }
+
+            let tryprase = parseInt(val)
+            if (isNaN(tryprase)) {
+                props.context.node.input(val)
+                return
+            }
 
-const ss = Object.entries(useSlots()).map(([key]) => key);
+            if (props.context.number === "integer") {
+                props.context.node.input(parseInt(val))
+                return
+            }
+
+            props.context.node.input(parseFloat(val))
+        } else {
+            props.context.node.input(val)
+        }
+    }
+})
 
 const onBlur = () => {
     if (errorMessage.value) {
@@ -23,13 +43,13 @@ const onBlur = () => {
     }
 }
 
-
 </script>
 <template>
     <l-input v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
         :error-message="errorMessage" @blur="onBlur">
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </l-input>
 </template>

package/dist/runtime/formkit/Select.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { getErrorMessage } from 'formkit-quasar';
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 const props = defineProps({
     context: Object
 });
@@ -12,9 +12,6 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-const ss = Object.entries(useSlots()).map(([key, value]) => {
-    return key;
-});
 
 //check required in parsedRules
 let required = false;
@@ -37,8 +34,8 @@ if (required) { //no clearable
 <template>
     <l-select v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :error-message="errorMessage"
         :clearable="clearable">
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </l-select>
 </template>

package/dist/runtime/formkit/TimePicker.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
 
 const props = defineProps({
@@ -12,14 +12,12 @@ const value = computed({
     get: () => props.context.value,
     set: (val) => props.context.node.input(val)
 })
-
-const ss = Object.entries(useSlots()).map(([key]) => key);
 </script>
 <template>
     <l-time-picker v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
         :error-message="errorMessage">
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </l-time-picker>
 </template>

package/dist/runtime/formkit/index.mjs

@@ -11,10 +11,16 @@ import OptionGroupVue from "./OptionGroup.vue";
 import FilePickerVue from "./FilePicker.vue";
 import FileVue from "./File.vue";
 import InputXlsxVue from "./InputXlsx.vue";
+import FileUploadVue from "./FileUpload.vue";
 export const createLightPlugin = () => {
   return (node) => {
     let type = node.props.type + "";
     switch (type) {
+      case "l-file-upload":
+        return node.define({
+          type: "input",
+          component: FileUploadVue
+        });
       case "l-input-xlsx":
         return node.define({
           type: "input",
@@ -58,7 +64,7 @@ export const createLightPlugin = () => {
       case "l-input":
         return node.define({
           type: "input",
-          props: ["inputType"],
+          props: ["inputType", "number"],
           component: Input
         });
       case "l-select":

package/dist/runtime/pages/System/test.vue

@@ -1,29 +1,13 @@
 <script setup>
-import { reactive } from 'vue'
-import { m } from "../../"
-const obj = reactive({
-    input1: 'test',
-    editor: 'test',
-})
-const onSave = async () => {
-    console.log(obj)
-
-    await m("testSystem", {
-        data: obj
-    })
-
-}
 
 </script>
 <template>
     <l-page>
-        {{ obj }}
-        <l-form v-model="obj">
-            <l-input v-model="obj.input1" label="Input1" />
-            <q-file v-model="obj.file" label="File" accept=".txt" />
-
-            <q-editor v-model="obj.editor" />
 
-        </l-form>
+        <l-card title="Test">
+            <q-card-section>
+            </q-card-section>
+        </l-card>
+        
     </l-page>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",