@hostlink/nuxt-light 1.0.6 → 1.0.7

package/dist/module.json

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

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/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/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",

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.6",
+  "version": "1.0.7",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",