Merge pull request #109 from Jenesius/issue_105

Issue 105

Author: Jenesius

docs/.vitepress/config.ts

@@ -63,7 +63,8 @@ function sidebar() {
 		{
 			text: "Best Practices",
 			items: [
-				{ text: "Depth information", link: "/guide/form-in-depth" }
+				{ text: "Depth information", link: "/guide/form-in-depth" },
+				{ text: 'Converting Options', link: "/utils/convert-options-object" }
 			]
 		},
 

docs/guide/custom-widgets.md

@@ -10,34 +10,20 @@ overwrite part of it. This method is described [here](/guide/configuration#input
 Any *props* passed will also be passed to your component.
 But! There are some differences worth mentioning:
 
-### options
-Options will **always** be cast as follows:
+- **options** Array of options, used for select/radio. Read more [here](/utils/convert-options-object). The data undergoes additional transformation and always has a place to be:
 
-```json
-[
-  {
-    "title": "Title", "value": 1
-  },
-  {
-    "title": "Jenesius", "value": 2
-  }
-]
-```
-
-### disabled and errors
-These properties will be internal, they can be overridden, but then the form will not be able to
-influence them:
-```html
-<input-field disabled name = "input"/>
-```
 ```ts
-form.enable('input'); // Not working
-```
-Similarly, with `errors`, in this case the `validate` method will not be able to show errors.
+type Options = Array<{
+    label: string,
+    value: any
+}>
+
 
-----
-This is where the restrictions end. If this method or restrictions are not allowed
-for your project, you can use the following method.
+
+```
+- **disabled** Will be dynamically pulled from the form. Changed using *disable/enable* methods
+- **errors** Is an array of strings
+- **changed** Dynamically pulled out of the mold. True - if the field is marked as modified in the form.
 
 ## Own Components
 

docs/utils/convert-options-object.md

@@ -1,3 +1,76 @@
 # Convert options object
 
-Здесь будет описано трансформация options.
+For better compatibility with previous solutions, as well as ease of development, the options property can be
+two kinds:
+
+## Object
+This view is an object with **value** on the left and **label** on the right. For example
+country enumeration has been selected:
+```ts
+const options = {
+	'en': 'Great Britain',
+    'us': 'United States',
+    'jp': 'Japan',
+    'ru': 'Russia'
+}
+```
+
+:::tip Why Value on left side?
+Primarily because the value must be unique. Because object is used for
+simple variants of this property was the most significant.
+:::
+
+The disadvantage of this approach is that the value can only be a string. **Important** to remember that
+even a numeric property will be converted to a string.
+
+## Array based
+This method is more flexible, because allows you to set any data to the value. In this case, *options*
+takes the following form:
+```ts
+const options = [
+    { value: 'en', label: 'Great Britain' },
+    { value: 'us', label: 'United States' },
+    { value: 'jp', label: 'Japan' },
+    { value: 'ru', label: 'Russia' },
+]
+```
+This method is more cumbersome than the first, but more flexible, because now we can use the following:
+```ts
+const options = [
+    {
+        value: { code: 1, mark: 'en' }, label: 'Great Britain' 
+    }
+]
+```
+
+## Converting
+
+When using **input-field** remember that you will always get options as an output as an array!
+This is easier to show with an example:
+
+```vue
+
+<template>
+	<input-field :options = "data" type = "custom-input"/>
+</template>
+<script setup>
+import {InputField} from "./index";
+const data = {
+	'1': 'M',
+    '2': 'W'
+}
+</script>
+```
+```vue
+<!--custom-input-->
+<div>
+    {{options}} 
+</div>
+<script setup>
+const props = defineProps({
+    options: Array
+})
+
+props.options; // [ { value: '1', label: 'M' }, { value: '2', label: 'W' } ]
+</script>
+```

plugin/classes/Form.ts

@@ -14,6 +14,7 @@ import deletePropByName from "../utils/delete-prop-by-name";
 import getPropFromObject from "../utils/get-prop-from-object";
 import  {IComparisonResult, searchByComparison, searchChangesByComparison} from "../utils/search-changes-by-comparison";
 import debug from "../debug/debug";
+import checkNameInObject from "../utils/check-name-in-object";
 
 export default class Form extends EventEmitter implements FormDependence{
 	static PROVIDE_NAME			 = 'form-controller';
@@ -125,7 +126,14 @@ export default class Form extends EventEmitter implements FormDependence{
 	get changed() {
 		return !!Object.keys(this.#changes).length || !!this.dependencies.find(d => d.changed);
 	}
-	
+
+	/**
+	 * @description Method check name for including in changes.
+	 * */
+	checkDependenceForChangedStatus(dependenceName: string) {
+		return checkNameInObject(this.changes, dependenceName);
+	}
+
 	/**
 	 * Getter/Setter for values.
 	 */

plugin/classes/Input.ts

@@ -34,6 +34,19 @@ export default class Input extends EventEmitter {
 		this.parentForm?.input(this.name, v);
 	}
 
+	/**
+	 * @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.checkDependenceForChangedStatus(this.name);
+	}
+
 	/**
 	 * @description Run all validations. Input is not validated If on
 	 * e of guard don't return true.

plugin/hooks/use-input-state.ts

@@ -1,5 +1,6 @@
-import {onUnmounted, reactive, watch} from "vue";
+import {onUnmounted, reactive} from "vue";
 import Input from "../classes/Input";
+import debug from "../debug/debug";
 
 export default function useInputState(name: string, validation: any[] = []) {
 
@@ -18,19 +19,32 @@ function useInputController(input: Input) {
 	const state = reactive<{
 		value: any,
 		disabled: boolean,
-		errors: string[]
+		errors: string[],
+		changed: boolean
 	}>({
 		value: input.value,
 		disabled: input.disabled,
-		errors: []
+		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;
+			updateChanged();
 		},
 		setValues(v: any) {
 			state.value = v;
+			updateChanged();
 		},
 		disable: () => {
 			state.disabled = true;
@@ -64,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/utils/check-name-in-object.ts

@@ -0,0 +1,26 @@
+import splitName from "./split-name";
+
+/**
+ * @description Return true if object include name, otherwise - false. Object should be granted!
+ * @example
+ *   { user: { id: 2, address: {city: "Mars"} } }
+ *   user.id         -> true
+ *   user            -> true
+ *   user.name       -> false
+ *   user.name.label -> false
+ * */
+export default function checkNameInObject<T extends Record<string, any>>(object: T, searchName: string ) {
+    const names = splitName(searchName);
+
+    for(let i = 0; i < names.length; i++) {
+        const name = names[i];
+        try {
+            if ((name in object) === false || !object.hasOwnProperty(name)) return false;
+        } catch (e) {
+            return false;
+        }
+        object = object[name];
+    }
+
+    return true;
+}

plugin/utils/split-name.ts

@@ -0,0 +1,3 @@
+export default function splitName(name: string) {
+    return name.split('.');
+}

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="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/,'')
 }