docs: add information about new prop 'changed'. Add info about converting options.

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/widgets/input-field.vue

@@ -6,7 +6,7 @@
             :modelValue="props.name ? state.value : modelValue"
             @update:modelValue="handleInput"
 
-            :label="props.label"
+            :label="label"
             :disabled="state.disabled"
             :errors="state.errors"
             :options="parseOptions(options)"