fix: add copy of object in use-input-state.ts

plugin/classes/FormProxy.ts

@@ -9,11 +9,14 @@ import getPropFromObject from "../utils/get-prop-from-object";
  * For example, it is used for the address composite element, which itself consists of child elements.
  * */
 export default class FormProxy extends Form{
+	/**
+	 * @override
+	 * */
 	name: string;
-	
+
 	constructor(p:any) {
 		super(p);
-		
+
 		this.name = p.name;
 	}
 

plugin/hooks/use-form-values.ts

@@ -7,7 +7,7 @@ import {reactive} from "vue";
  * @description Return dynamic form values.
  * */
 export default function useFormValues(form: Form) {
-    const values = reactive(form.values);
+    const values = reactive(form.values || {});
     form.oninput(data => {
         const newValues = {
             [data.name]: data.newValue

plugin/hooks/use-input-state.ts

@@ -1,6 +1,7 @@
 import {onUnmounted, reactive} from "vue";
 import Input from "../classes/Input";
 import debug from "../debug/debug";
+import copyObject from "../utils/copy-object";
 
 export default function useInputState(name: string, validation: any[] = []) {
 
@@ -15,7 +16,6 @@ export default function useInputState(name: string, validation: any[] = []) {
 }
 
 function useInputController(input: Input) {
-
 	const state = reactive<{
 		value: any,
 		disabled: boolean,
@@ -39,11 +39,13 @@ function useInputController(input: Input) {
 
 	const controls = {
 		change: (v:any) => {
-			state.value = v;
+			debug.msg(`New FormField(${input.name}) Value`, v);
+			state.value = (Object.isFrozen(v)) ? v :copyObject(v);
 			updateChanged();
 		},
 		setValues(v: any) {
-			state.value = v;
+			debug.msg(`New FormField(${input.name}) Value`, v);
+			state.value = (Object.isFrozen(v)) ? v :copyObject(v);
 			updateChanged();
 		},
 		disable: () => {

plugin/hooks/use-proxy-state.ts

@@ -12,5 +12,7 @@ export default function useProxyState(name: string) {
 		form.parentForm?.unsubscribe(form);
 	})
 
-	return {}
+	return {
+		form
+	}
 }

src/pages/test/App.vue

@@ -4,7 +4,12 @@
 
 		<input-field type = "text" name = "sun" label = "Username" prefix = "MMM"  :modify = "splitPoint"/>
 
-		<widget-child/>
+		<input-field type = "coord" name = "coordinate"/>
+
+		<input-coord name="coordinate" />
+
+		<input-field name = "file" type = "file"/>
+
 	</div>
 </template>
 
@@ -13,19 +18,12 @@ import InputField from "../../../plugin/widgets/input-field.vue";
 import {config, Form, useInputState} from "../../../plugin";
 import {onMounted, ref} from "vue";
 import WidgetChild from "@/pages/test/widget-child.vue";
+import InputCoord from "@/pages/test/input-coord.vue";
 
 const form = new Form();
 
-config({
-	debug: false
-})
-onMounted(() => setTimeout(() => form.validate(), 1000))
 
 
-function m1(a: string) {
-	return a.replace(/\D/,'')
-}
-
 
 function test() {
 	throw new Error('test')

src/pages/test/input-coord.vue

@@ -0,0 +1,23 @@
+<template>
+	<div>
+		<input-field name = "X" label = "X"/>
+		<input-field name = "Y" label = "Y"/>
+
+		{{values}}
+	</div>
+</template>
+
+<script setup lang = "ts">
+import {InputField, useFormValues, useProxyState} from "../../../plugin";
+
+const props = defineProps<{
+	name: string,
+}>()
+const {form} = useProxyState(props.name)
+
+const values = useFormValues(form)
+</script>
+
+<style scoped>
+
+</style>

src/pages/test/input-file.vue

@@ -0,0 +1,79 @@
+<template>
+	<div class="container-input-file">
+		<p>UPLOADING FILE</p>
+		<input class="widget-input-file" type="file" @change="onInput"/>
+		{{modelValue}}
+	</div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+	modelValue: any
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+	(event: 'update:modelValue', file: any):void
+}>();
+function onInput(event: any) {
+	const file = event.target.files[0];
+	console.log(file)
+	emit('update:modelValue', Object.freeze(file))
+}
+
+</script>
+
+<style scoped>
+.container-input-file {
+	display: flex;
+	background-color: red;
+}
+
+.button-upload-file {
+	display: grid;
+	place-content: center;
+	border: 2px dashed gray;
+	height: 35px;
+	width: 100px;
+	position: relative;
+	cursor: pointer;
+	border-radius: 4px;
+}
+
+.widget-input-file {
+	opacity: 0;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	z-index: 1;
+	cursor: pointer;
+}
+
+.widget-input-file::-webkit-file-upload-button {
+	display: none;
+	color: gray;
+}
+
+.button-upload-file__label {
+	font-size: 14px;
+}
+
+.button-upload-file_wait {
+	cursor: default;
+	border-color: blue;
+}
+
+.button-upload-file_error {
+	border-color: red;
+}
+
+.button-upload-file_wait:after {
+	content: "";
+	position: absolute;
+	z-index: 1;
+	height: 100%;
+	width: 100%;
+	top: 0;
+	left: 0;
+}
+</style>

src/pages/test/main.ts

@@ -4,11 +4,15 @@ import {config} from "../../../plugin";
 
 import country from "./widget-input-country.vue";
 import accountType from "@/pages/test/widget-input-account-type.vue";
+import InputCoord from "@/pages/test/input-coord.vue";
+import InputFile from "@/pages/test/input-file.vue";
 
 config({
 	inputTypes: {
 		country,
-		"account-type": accountType
+		"account-type": accountType,
+		coord: InputCoord,
+		file: InputFile
 	},
 	debug: true
 })