native-document 1.0.211 → 1.0.213

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.211",
+  "version": "1.0.213",
   "description": "A reactive JavaScript framework that preserves native DOM simplicity without sacrificing modern features",
   "author": "AfroCodeur <https://github.com/afrocodeur>",
   "license": "MIT",

package/src/components/form/FormControl.js

@@ -52,6 +52,7 @@ export default function FormControl(props) {
 
 FormControl.defaultTemplate = null;
 FormControl.defaultErrorsMapper = null;
+FormControl.keyResolver = null;
 
 /**
  * Registers the render template for FormControl.
@@ -78,6 +79,10 @@ FormControl.setDefaultErrorsMapper = function(mapper) {
     FormControl.defaultErrorsMapper = mapper;
 };
 
+FormControl.setKeyResolver = function(resolver) {
+    FormControl.keyResolver = resolver;
+};
+
 /**
  * @param {GlobalAttributes} [props]
  * @returns {FormControl}
@@ -128,7 +133,19 @@ FormControl.prototype.fields = function(fieldBuilder) {
     return this;
 };
 
-FormControl.prototype.$registerField = function(name, field) {
+const resolveFieldName = (_name, field) => {
+    let name = _name;
+    if(FormControl.keyResolver) {
+        name = FormControl.keyResolver(_name);
+    }
+    if(field?.$description.as) {
+        name = field.$description.as;
+    }
+    return name;
+};
+
+FormControl.prototype.$registerField = function(_name, field) {
+    const name = resolveFieldName(_name);
     this.$fields[name] = field;
 
     const dataSource = this.$description.data?.[name];
@@ -149,7 +166,9 @@ FormControl.prototype.$registerField = function(name, field) {
  * @returns {Field|null}
  */
 FormControl.prototype.get = function(fieldName) {
-    const field = this.$fields[fieldName];
+    const name = resolveFieldName(fieldName, field);
+    const field = this.$fields[name];
+
     if(!field) {
         throw new NativeDocumentError(`Field "${fieldName}" not found in form`);
     }

package/src/components/form/field/Field.js

@@ -30,6 +30,7 @@ export default function Field(name, type, props) {
     BaseComponent.call(this, props);
 
     this.$description = {
+        as: null,
         name:          name,
         type:          type,
         key:           name,
@@ -120,6 +121,16 @@ Field.prototype.forceShowErrors = function(forceValue) {
     this.$description.showErrors.intercept(() => forceValue);
 };
 
+/**
+ * the alias for form control mapping
+ * @param as
+ * @return {Field}
+ */
+Field.prototype.as = function(as) {
+    this.$description.as = as;
+    return this;
+};
+
 /**
  * @param {string} key
  * @returns {this}

package/src/components/form/types/Field.d.ts

@@ -30,6 +30,7 @@ export type FieldDescription = {
 export interface FieldInterface extends BaseComponent, HasValidation {
     forceShowErrors(forceValue: boolean): void;
     key(key: string): this;
+    as(key: string): this;
     suffix(suffix: string): this;
     field(): HTMLElement | DocumentFragment;
     input(callback: (input: HTMLElement) => void): this;

package/src/components/form/types/FormControl.d.ts

@@ -19,7 +19,7 @@ export type FormControlDescription = {
         props: GlobalAttributes;
     };
 
-export interface FormControlInterface extends BaseComponent {
+export interface FormControlInterface extends Omit<BaseComponent, 'onChange'|'onReset'|'onSubmit'|'onPreventSubmit'|'onError'> {
     fields(fieldBuilder: (form: FormControlInterface) => void): this;
     get(fieldName: string): FieldInterface | null;
     layout(layoutCallback: (fields: Record<string, FieldInterface>) => ValidChild): this;
@@ -57,6 +57,7 @@ export declare function FormControl(props?: Record<string, unknown>): FormContro
 export declare namespace FormControl {
 
     function setDefaultErrorsMapper(mapper: (error: Error) => Record<string, string|[]>): void;
+    function setKeyResolver(resolver: (name: string) => void): void;
     function use(template: (description: FormControlDescription, instance: FormControlInterface) => ValidChild): void;
     function create(props?: Record<string, unknown>): FormControlInterface;
 

package/src/core/data/ObservableItem.js

@@ -644,4 +644,12 @@ ObservableItem.prototype.clone = function() {
     }
 
     return new ObservableItem(clonedValue);
+};
+
+ObservableItem.prototype.asSet = function(value) {
+    return () => this.set(value);
+};
+
+ObservableItem.prototype.asToggle = function() {
+    return () => this.toggle();
 };

package/types/observable.d.ts

@@ -130,6 +130,10 @@ export interface ObservableItem<T = any> {
     toClamped(min: number | ObservableItem<number>, max: number | ObservableItem<number>): ObservableChecker<number>;
     toPercent(total: number | ObservableItem<number>): ObservableChecker<number>;
 
+    // -- callback builder (as*) -------------------------------------------------
+    asSet(value: T): ObservableChecker<T>;
+    asToggle(): ObservableChecker<boolean>;
+
     toString(): string;
     valueOf(): T;
     equals(value: any): boolean;