feat: update name to checkDependenceForChangedStatus. add new test for it.

Author: Jenesius

plugin/classes/Form.ts

@@ -130,7 +130,7 @@ export default class Form extends EventEmitter implements FormDependence{
 	/**
 	 * @description Method check name for including in changes.
 	 * */
-	checkNameForChangedStatus(dependenceName: string) {
+	checkDependenceForChangedStatus(dependenceName: string) {
 		return checkNameInObject(this.changes, dependenceName);
 	}
 

plugin/classes/Input.ts

@@ -38,9 +38,13 @@ export default class Input extends EventEmitter {
 	 * @description Boolean value, true if parent form mark current field like changed.
 	 * */
 	get changed() {
-		if (!this.name) return false;
-		if (!this.parentForm) return false;
-		return this.parentForm.checkNameForChangedStatus(this.name);
+		if (!this.name) {
+			return false;
+		}
+		if (!this.parentForm) {
+			return false;
+		}
+		return this.parentForm.checkDependenceForChangedStatus(this.name);
 	}
 
 	/**

plugin/hooks/use-input-state.ts

@@ -1,5 +1,6 @@
 import {onUnmounted, reactive} from "vue";
 import Input from "../classes/Input";
+import debug from "../debug/debug";
 
 export default function useInputState(name: string, validation: any[] = []) {
 
@@ -26,14 +27,24 @@ function useInputController(input: Input) {
 		errors: [],
 		changed: input.changed
 	})
-	
+
+	/**
+	 * @description setTimeout used for wait short time after values will be marked like changed inside Form.
+	 * */
+	function updateChanged() {
+		setTimeout(() => {
+			state.changed = input.changed;
+		}, 0)
+	}
+
 	const controls = {
 		change: (v:any) => {
 			state.value = v;
-			state.changed = true
+			updateChanged();
 		},
 		setValues(v: any) {
 			state.value = v;
+			updateChanged();
 		},
 		disable: () => {
 			state.disabled = true;
@@ -67,6 +78,7 @@ function useInputController(input: Input) {
 	function updateName(name: string) {
 		off?.();
 		input.name = name;
+		if (!input.parentForm) debug.msg(`input:${name}`, `Can't found parent form.`)
 		off = input.parentForm?.dependInput(name, controls);
 	}
 

plugin/widgets/input-field.vue

@@ -1,17 +1,18 @@
 <template>
-	<component
-		:is="componentItem"
-		:name="name"
-
-		:modelValue="props.name ? state.value : modelValue"
-		@update:modelValue="handleInput"
-
-		:label="props.label"
-		:disabled="state.disabled"
-		:errors="state.errors"
-		:options="parseOptions(options)"
-		:autofocus="autofocus"
-	/>
+    <component
+            :is="componentItem"
+            :name="name"
+
+            :modelValue="props.name ? state.value : modelValue"
+            @update:modelValue="handleInput"
+
+            :label="props.label"
+            :disabled="state.disabled"
+            :errors="state.errors"
+            :options="parseOptions(options)"
+            :autofocus="autofocus"
+            :changed="state.changed"
+    />
 </template>
 
 <script setup lang="ts">
@@ -90,6 +91,9 @@ function parseOptions(v: typeof props.options) {
 
 function handleInput(v: any) {
 	input.change(v);
+	/**
+	 * Events for user interface. You can use both variant.
+	 * */
 	emits('update:modelValue', v)
 	emits('input', v)
 }

src/pages/test/App.vue

@@ -10,20 +10,22 @@
 		<input-field type = "text" name = "sun" label = "Username" prefix = "MMM"  :pretty = "splitPoint"/>
 		<input-field type = "text" name = "sun" label = "numeric" prefix = "MMM" :modify = "[]" numeric />
 
-
+		<widget-child/>
 	</div>
 </template>
 
 <script setup lang='ts'>
 import InputField from "../../../plugin/widgets/input-field.vue";
-import {Form} from "../../../plugin";
+import {Form, useInputState} from "../../../plugin";
 import {onMounted, ref} from "vue";
+import WidgetChild from "@/pages/test/widget-child.vue";
 
 const form = new Form();
 
 
 onMounted(() => setTimeout(() => form.validate(), 1000))
 
+
 function m1(a: string) {
 	return a.replace(/\D/,'')
 }

src/pages/test/widget-child.vue

@@ -1,11 +1,16 @@
 <template>
-	<p>{{label}}</p>
+	<p>{{state.state}}</p>
 </template>
 
 <script setup lang="ts">
-defineProps<{
-	label: string
-}>()
+
+import {useInputState} from "../../../plugin";
+
+const state = useInputState('sun')
+
+window.sun = state.input;
+
+
 </script>
 
 <style scoped>

tests/form/check-dependence-for-changed-status.spec.ts

@@ -0,0 +1,23 @@
+import {Form} from "../../plugin";
+import Input from "../../plugin/classes/Input";
+
+describe("Check name for changed status", () => {
+
+	test("After execute change status of changed input must be true", () => {
+		const form = new Form();
+
+		const input_1 = new Input({name: 'name'});
+		const input_2 = new Input({name: 'login'});
+
+		form.subscribe(input_1);
+		form.subscribe(input_2);
+
+		form.change({
+			name: "Jenesius"
+		})
+
+		expect(form.checkDependenceForChangedStatus(input_1.name)).toBe(true)
+		expect(form.checkDependenceForChangedStatus(input_2.name)).toBe(false)
+	})
+
+})