Merge pull request #192 from Jenesius/issue_191

Issue 191

Author: Jenesius

CHANGELOG.md

@@ -1,3 +1,20 @@
+#### 3.0.12 (2024-02-01)
+
+##### Documentation Changes
+
+*  add new information about 'handlers' of input-date. ([58780903](https://github.com/Jenesius/vue-form/commit/5878090358916863dcaea5e87b12b9eac3cd42a7))
+
+##### New Features
+
+*  add widgets prop for main import ([649e5f80](https://github.com/Jenesius/vue-form/commit/649e5f802c6e6edbf600cd85dffcb418d7cdc7fe))
+
+##### Bug Fixes
+
+*  update handlers for input-date. Add new tests. ([64826cf3](https://github.com/Jenesius/vue-form/commit/64826cf3c4c48e715e9bcb9093d041a43109fd4b))
+*  update version to 3.0.9. Add DateController. Add handlers for input-date ([c3d5f1d6](https://github.com/Jenesius/vue-form/commit/c3d5f1d6f2e56477b5700d21c8f8208c380afc9b))
+*  update version to 3.0.8 ([139c8958](https://github.com/Jenesius/vue-form/commit/139c8958ba45286f9bd94bea5a334f27aa692d12))
+*  update vue version ([34cb35b8](https://github.com/Jenesius/vue-form/commit/34cb35b89b6cbaa32e10eb9cff58892726236323))
+
 #### 3.0.6 (2023-12-09)
 
 ##### Bug Fixes

docs/inputs/input-date.md

@@ -28,6 +28,36 @@ String label, displayed when there is no data in the field.
 The mask sets the date display format. The mask can consist of characters of any character, however
 keywords are `Y`, `M`, `D`, `H` and `h`. The corresponding values will be substituted for their position.
 
+### handlers
+- Type: 'array'
+- By default: `[]`.
+
+An array of handlers that can be used to enter fields. The array must consist of two elements. First
+It is a handler of form model values of the “Date” type. The second handler is a converter from strings(values,
+located inside the input fields) in the value that needs to be stored in the model data form.
+
+#### Example
+
+```vue
+
+<template>
+  <FormField type="date" :handlers="[handlerForm, handlerTo]" mask = "YYYY-MM-DD HH"/>
+</template>
+<script setup>
+  import {DateController} from "jenesius-vue-form";
+
+  function handlerFrom(formValue) {
+    return new Date(formValue)
+  }
+
+  function handlerTo(strValue) {
+    return DateController.ConvertToDate(strValue, 'YYYY-MM-DD HH').toISOString()
+  }
+</script>
+```
+In the current example, we have set a new mask for this field, and also defined handlers to convert the value to
+ISO date format.
+
 ____ 
 
 Also, all parameters common to all `FormField`. Information about them can be found on [this page](./form-field.md#params).

docs/ru/inputs/input-date.md

@@ -28,6 +28,34 @@ const values = useFormValues(form)
 Маска задаёт формат отображение даты. Маска может состоять из символов любых символов, однако 
 ключевыми являются `Y`, `M`, `D`, `H` и `h`. На их позицию будут подставлены соотвествующие значений.
 
+### handlers
+- Тип: 'array'
+
+Массив обработчиков, которые можно применить к значению поля ввода. Массив должен состоять из двух элементов. Первый
+является обработчиком значения из модели форму к типу `Date`. Второй обработчик является конвертером из строки(значения,
+находящееся внутри поля ввода) в значение, которое необходимо хранить в модели данных формы.
+
+#### Example
+
+```vue
+
+<template>
+  <FormField type="date" :handlers="[handlerForm, handlerTo]" mask = "YYYY-MM-DD HH"/>
+</template>
+<script setup>
+  import {DateController} from "jenesius-vue-form";
+
+  function handlerFrom(formValue) {
+    return new Date(formValue)
+  }
+
+  function handlerTo(strValue) {
+    return DateController.ConvertToDate(strValue, 'YYYY-MM-DD HH').toISOString()
+  }
+</script>
+```
+В текущем примере мы установили новую маску для данного поля, а также определили обработчики для конвертации значения в
+ISO формат даты.
 ____ 
 
 Так же все параметры, общие для всех `FormField`. Информацию о них можно посмотреть на [этой странице](./form-field.md#params).

examples/all-inputs/App.vue

@@ -31,6 +31,7 @@
 		<input-field name = "birthday" type = "date" label = "Disabled" disabled/>
 		<input-field name = "birthday" type = "date" label = "With Error" :errors = "['Some mistake']"/>
 		<input-field name = "birthday" type = "date" label = "Placeholder" placeholder = "Add your birthday." />
+		<input-field name = "birthday" type = "date" label = "Other mask" mask = "DD/MM/YYYY"/>
 
 		<h2>Input Tel</h2>
 		<input-field name = "phone" type = "tel"/>
@@ -117,6 +118,8 @@
 import {Form, InputField} from "../../src/index";
 
 const form = new Form();
+// @ts-ignore
+window.form = form;
 function modifyOnlyChar(a: string) {
 	return a.replace(/\d/g, '');
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "jenesius-vue-form",
-  "version": "3.0.7",
+  "version": "3.0.12",
   "description": "Heavy form system for Vue.js",
   "main": "dist/jenesius-vue-form.cjs.js",
   "module": "dist/jenesius-vue-form.es.js",

package.json

@@ -6,35 +6,27 @@
 		<div :key = "pureValue">Pure values: {{pureValue}}</div>
 		<div :key = "pureAvailabilities">Pure av: {{pureAvailabilities}}</div>
 
-		<form-field type = "native-date" name = "create" />
-
-		<br>
-
-
-		<button @click = "change">change field name</button>
-		<button @click = "clean">clean values</button>
-
-		<button @click = "setDefaultValues">set default values</button>
+		<input-field name = "birthday" type = "date" label = "Placeholder"  />
 
+		<input-field name = "birthday" type = "date" label = "Other mask" mask = "MM/DD/YYYY" :handlers = "[testFrom, testTo]"/>
 
 
 	</div>
 </template>
 
 <script setup lang='ts'>
 import Form from "../../../src/classes/Form";
-import FormField from "./../../../src/widgets/form-field.vue";
-import {computed, ref} from "vue";
-import WidgetAddress from "./widget-address.vue"
+import {ref} from "vue";
 import copyObject from "./../../../src/utils/copy-object";
+import {InputField} from "../../../src/index";
+import DateController from "../../../src/controllers/date-controller";
 
 // @ts-ignore
 const form = window.form = new Form({
 	name: "main",
 	parent:false
 });
 const show = ref(false);
-const labelButton = computed(() => show.value ? 'Hide' : 'Show')
 
 setInterval(() => {
 	if (!form) return;
@@ -61,12 +53,21 @@ function change() {
 function clean() {
 	form.cleanValues();
 }
-function setDefaultValues() {
-	return form.cleanValues({
-		username: "Jenesius",
-		"coordinate.x": "123"
-	})
+
+function testFrom(date: unknown) {
+	if (typeof date !== 'string') return null;
+	return new Date(date)
+}
+
+function testTo(str?: string) {
+	if (typeof str !== 'string') return null;
+
+	const p = DateController.ConvertToDate(str, "MM/DD/YYYY");
+	if (!p) return null;
+
+	return DateController.GetPrettyDate(p, 'YYYY-MM-DD')
 }
+
 </script>
 
 <style>

project/pages/test/App.vue

@@ -18,7 +18,7 @@ config({
 		'local-date': InputTestDateLocal,
 		'native-date': InputNativeDate
 	},
-	debug: true
+	// debug: true
 })
 
 createApp(App).mount('#app')

project/pages/test/main.ts

@@ -1,13 +1,25 @@
-import mergeObjects from "./../utils/merge-objects";
 import STORE, {IStore} from "./store";
-import Store from "./store";
-import debug from "./../debug/debug";
+import widgets from "./widgets";
 
 export default function config(params: ConfigParams) {
 
-	/**
-	 * In case if params includes inputTypes, merge provided component with default widgets.
-	 */
+	Object.assign(STORE, params);
+
+	STORE.inputTypes = {
+		...widgets,
+		...(params.inputTypes || {}),
+	}
+
+	if (STORE.typeNotCaseSensitive)
+		STORE.inputTypes = Object.entries(STORE.inputTypes).reduce<Record<string, any>>((acc, [type, component]) => {
+			acc[type.toLowerCase()] = component
+			return acc;
+		}, {})
+
+	return;
+
+	/*
+	// In case if params includes inputTypes, merge provided component with default widgets.
 	if ("typeNotCaseSensitive" in params && typeof params.typeNotCaseSensitive === "boolean") Store.typeNotCaseSensitive = params.typeNotCaseSensitive;
 
 
@@ -34,6 +46,11 @@ export default function config(params: ConfigParams) {
 	} catch (e) {
 		console.error(e)
 	}
+
+	if (params.date) {
+		mergeObjects(STORE.date, params.date);
+	}
+*/
 }
 
 type ConfigParams = Partial<IStore> & {

src/config/config.ts

@@ -9,8 +9,8 @@ const STORE: IStore = {
 	debug: false,
 	defaultType: 'text',
 	cleanValue: null,
+	dateMask: "DD/MM/YYYY",
 	date: {
-		dateMask: "YYYY/MM/DD",
 		months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
 		daysWeek: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
 		calendar: {
@@ -34,8 +34,8 @@ export interface IStore {
 	debug: boolean,
 	defaultType: string,
 	cleanValue: any,
+	dateMask: string,
 	date: {
-		dateMask: string,
 		months: string[],
 		daysWeek: string[],
 		calendar: {