refactor: move some files to /src folder, deprecate proxy form

docs/components/widget-example-form-disable.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script setup>
-    import InputStreet from "./../../src/components/input-street.vue";
+    import InputStreet from "./../../_src/components/input-street.vue";
     import {Form, InputField} from "../../plugin";
     import {onUnmounted, ref} from "vue";
 

docs/components/widget-example-one-point-value.vue

@@ -5,7 +5,7 @@
 
 <script setup>
     import {Form, InputField} from "../../plugin";
-    import InputAddress from "./../../src/components/input-address.vue";
+    import InputAddress from "./../../_src/components/input-address.vue";
 
     const form = new Form()
 

plugin/classes/Form.ts

@@ -2,7 +2,6 @@ import EventEmitter from "jenesius-event-emitter";
 import {getCurrentInstance, inject as injectVue, provide as provideVue} from "vue";
 import FormErrors from "./FormErrors";
 import {FormDependence, FunctionHandleData, Value, Values} from "../types";
-
 import mergeObjects from "../utils/merge-objects";
 import runPromiseQueue from "../utils/run-promise-queue";
 import replaceValues from "../utils/replace-values";
@@ -16,43 +15,58 @@ import  {IComparisonResult, searchByComparison, searchChangesByComparison} from
 import debug from "../debug/debug";
 import checkNameInObject from "../utils/check-name-in-object";
 
-export default class Form extends EventEmitter implements FormDependence{
+export default class Form extends EventEmitter implements FormDependence {
+	/**
+	 * @description. Find the parent Form. Using for subscribe elements.
+	 * Bottleneck of current library: inject, provide should state outside classes.
+	 */
+	static getParentForm(): Form | undefined {
+		return injectVue<Form | undefined>(Form.PROVIDE_NAME, undefined);
+	}
+	/**
+	 * @
+	 * */
+	static GET_EVENT_FIELD_INPUT(name: string) {
+		return `${Form.EVENT_INPUT}:${name}`;
+	}
 	static PROVIDE_NAME			 = 'form-controller';
 	static EVENT_READ			 = 'read';
 	static EVENT_SAVE			 = 'save';
 	static EVENT_DISABLE		 = 'disable';
 	static EVENT_ENABLE			 = 'enable';
-
 	static EVENT_SUBSCRIBE		 = 'subscribe';
 	static EVENT_UNSUBSCRIBE	 = 'unsubscribe';
-
 	static EVENT_VALUE			 = 'value';
 	static EVENT_UPDATE_ABILITY  = 'ability:update';
 	static EVENT_INPUT			 = `input`;
-	/**
-	 * @
-	 * */
-	static GET_EVENT_FIELD_INPUT(name: string) {
-		return `${Form.EVENT_INPUT}:${name}`;
-	}
-
 	/**
 	 * @description Вызывается всякий раз, когда форма была изменена. Внимание!
 	 * Не установлено значение setValues, а изменена.
 	 */
 	static EVENT_CHANGED		 	 = 'changed';
 	static EVENT_DISABLED		 	 = 'disabled';
-
 	static EVENT_WAIT				 = 'wait'
 
-	/**
-	 * @description. Find the parent Form. Using for subscribe elements.
-	 * Bottleneck of current library: inject, provide should state outside classes.
-	 */
-	static getParentForm(): Form | undefined {
-		return injectVue<Form | undefined>(Form.PROVIDE_NAME, undefined);
-	}
 
+	constructor(params: FormParams = {}) {
+		super();
+
+		this.name = params.name;
+
+		// If Form was executed inside setup().
+		const currentInstance = !!getCurrentInstance();
+
+		// If params don't include parent: false, looking for a form, in case of success subscribe current form to parent.
+		if (params.parent !== false) {
+			if (currentInstance) this.parentForm = Form.getParentForm();
+			if (this.parentForm) this.parentForm.subscribe(this);
+		}
+
+		if (currentInstance)
+			provideVue(Form.PROVIDE_NAME, this); // Default providing current form for children.
+
+		debug.newForm(this);
+	}
 	/**
 	 * @description Name of current entity. Can be undefined for parent Form.
 	 */
@@ -169,25 +183,7 @@ export default class Form extends EventEmitter implements FormDependence{
 		this.setValuesOfItem(this.values);
 	}
 
-	constructor(params: FormParams = {}) {
-		super();
-
-		if (params.name)
-			this.name = params.name;
-		debug.msg(`Creating new Form${this.name? `[${this.name}]`: ''}`);
-
-		const currentInstance = !!getCurrentInstance()
-
-		// If params don't include parent: false, looking for a form, in case of success subscribe current form to parent.
-		if (params.parent !== false) {
-			if (currentInstance)
-				this.parentForm = Form.getParentForm();
-			if (this.parentForm) this.parentForm.subscribe(this);
-		}
 
-		if (currentInstance)
-			provideVue(Form.PROVIDE_NAME, this); // Default providing current form for children.
-	}
 
 	private markChanges(values: any) {
 		if (!values) {
@@ -329,7 +325,7 @@ export default class Form extends EventEmitter implements FormDependence{
 	 * @description subscribe is alice for depend. Subscribe element to Form.
 	 * */
 	subscribe(item: any) {
-		debug.msg(`New subscription${'name' in item ? `(${item.name})` : ''}`)
+		debug.newSubscription(this, item);
 
 		this.dependencies.push(item);
 

plugin/classes/FormProxy.ts

@@ -1,6 +1,7 @@
 import Form from "./Form";
 import getPropFromObject from "../utils/get-prop-from-object";
 /**
+ * @deprecated
  * PROXY_FORM
  * This element is used for compound elements. It does not store state in itself, but is only a proxy between the parent
  * form and the child ones. However, this form overrides some methods, making the interaction logic more isolated. In

plugin/classes/Input.ts

@@ -1,6 +1,9 @@
 import EventEmitter from "jenesius-event-emitter";
 import Form from "./Form";
 
+/**
+ * @deprecated
+ * */
 export default class Input extends EventEmitter {
 
 	parentForm?: Form;

plugin/config/store.ts

@@ -33,7 +33,8 @@ const STORE: IStore = {
 		'single-radio'	: WidgetInputSingleRadio
 	},
 	typeNotCaseSensitive: true,
-	debug: false
+	debug: false,
+	defaultType: 'text'
 }
 
 type defineInputTypes = 'text' | 'select' | 'radio' | 'checkbox' | 'switch' | 'password' | 'tel' | 'number' | 'range' | 'textarea';
@@ -43,7 +44,15 @@ export interface IStore {
 	},
 	requiredMessage: string,
 	typeNotCaseSensitive: boolean
-	debug: boolean
+	debug: boolean,
+	defaultType: string
 }
 export default STORE;
 
+
+export function getFieldType(type: any) {
+	if (typeof type !== 'string') return STORE.inputTypes[STORE.defaultType];
+
+	type = STORE.typeNotCaseSensitive ? type?.toLowerCase() : type;
+	return STORE.inputTypes[type] || STORE.inputTypes[STORE.defaultType];
+}

plugin/debug/debug.ts

@@ -1,8 +1,24 @@
 import STORE from "../config/store";
+import Form from "../classes/Form";
 
-export default new class debug{
-    msg(text: string, params: any = '') {
-        if (STORE.debug)
-            console.log(`%c[form]%c ${text}`, 'color: #42b883', 'color: black', params)
+class debug{
+    private static getName<T extends NamedElement>(element: T) {
+        return element.name ? `(${element.name})` : '';
     }
+    static msg(...params: string[]) {
+        if (!STORE.debug) return;
+
+        console.log(`%c[form]%c`, 'color: #42b883', 'color: black', ...params)
+    }
+    static newForm(form: Form) {
+        debug.msg(`form${debug.getName(form)}: created`);
+    }
+    static newSubscription<T extends NamedElement>(parent: T, child: T) {
+        debug.msg(`subscription${debug.getName(child)}: add to ${debug.getName(parent)}`)
+    }
+}
+export default debug;
+
+interface NamedElement {
+    name?: string
 }

plugin/debug/warn.ts

@@ -1,3 +1,5 @@
+import debug from "./debug";
+
 export default function warn(subject: string, text: string, error?: any) {
 	console.log(`%c[${subject}] %c${text}`, 'color: #dac400', 'color: black',error);
-}
+}

plugin/hooks/use-input-state.ts

@@ -3,6 +3,9 @@ import Input from "../classes/Input";
 import debug from "../debug/debug";
 import copyObject from "../utils/copy-object";
 
+/**
+ * @deprecated
+ * */
 export default function useInputState(name: string, validation: any[] = []) {
 
 	const input = new Input({name, validation});

plugin/hooks/use-proxy-state.ts

@@ -2,6 +2,9 @@ import {onUnmounted} from "vue";
 import FormProxy from "../classes/FormProxy";
 import FormErrors from "../classes/FormErrors";
 
+/**
+ * @deprecated
+ * */
 export default function useProxyState(name: string) {
 
 	if (!name) throw FormErrors.ProxyFormWithoutName();

plugin/types/index.ts

@@ -54,3 +54,8 @@ export type IPropsInput = {
 export type StringModify = (v: unknown) => string
 
 
+export interface SimpleFormParams {
+	name?: string
+}
+
+

plugin/widgets/input-field.vue

@@ -31,12 +31,14 @@ interface IProps {
 	options?: OptionRow[] | Record<string, any>,
 	required?: boolean,
 	autofocus?: boolean,
-	modelValue?: any
+	modelValue?: any,
+	composite?: boolean
 }
 
 const props = withDefaults(defineProps<IProps>(), {
 	validation: () => [],
 	type: 'text',
+	composite: false
 })
 const emits = defineEmits<{
 	(event: 'update:modelValue', value: any): void
@@ -60,6 +62,7 @@ const extendValidation = computed(() => {
 	return arr;
 })
 
+
 const {state, input, updateName} = useInputState(props.name, extendValidation.value);
 watch(() => props.name, () => {
 	if (props.name) updateName(props.name);

project/pages/test/App.vue

@@ -0,0 +1,38 @@
+<template>
+	<div class="container-examples">
+
+		<form-field :name="name" label = "Username"/>
+		<widget-composite/>
+		<button @click = "change">changed</button>
+
+		<div :key = "count">{{values}}</div>
+	</div>
+</template>
+
+<script setup lang='ts'>
+import Form from "../../../src/classes/Form";
+import FormField from "./../../../src/widgets/form-field.vue";
+import {ref} from "vue";
+import WidgetComposite from "./widget-composite.vue";
+
+const form = new Form({
+	name: "Main"
+});
+
+window.form = form
+
+const count = ref(0);
+setInterval(() => count.value++, 50);
+const values = ref(form.values);
+
+const name = ref('username');
+
+function change() {
+	name.value = name.value === 'username' ? 'age' : 'username';
+}
+
+</script>
+
+<style>
+
+</style>

src/pages/test/input-coord.vue → project/pages/test/input-coord.vue

@@ -8,12 +8,16 @@
 </template>
 
 <script setup lang = "ts">
-import {InputField, useFormValues, useProxyState} from "../../../plugin";
+import {Form, InputField, useFormValues} from "../../../plugin";
 
 const props = defineProps<{
 	name: string,
 }>()
-const {form} = useProxyState(props.name)
+
+const form = new Form({
+	name: props.name
+})
+
 function random() {
 	form.change({
 		X: Math.random()

project/pages/test/widget-composite.vue

@@ -0,0 +1,33 @@
+<template>
+	<div>
+		<form-field name="x"/>
+		<form-field name="y"/>
+
+		<div :key = "count">
+			Value: {{values}}
+		</div>
+	</div>
+</template>
+
+<script setup lang = "ts">
+import FormField from "./../../../src/widgets/form-field.vue";
+import Form from "./../../../src/classes/Form";
+import {ref} from "vue";
+
+const form = new Form({
+	name: 'coordinate'
+})
+
+const count = ref(0);
+setInterval(() => {
+	count.value++;
+	values.value = form.values;
+}, 50);
+
+const values = ref(form.values);
+
+</script>
+
+<style scoped>
+
+</style>