foorm 0.0.1-alpha.1

package/README.md

@@ -0,0 +1 @@
+# @foormjs/foorm

package/dist/index.cjs

@@ -0,0 +1,128 @@
+'use strict';
+
+var ftring = require('@prostojs/ftring');
+
+class Foorm {
+    constructor(opts) {
+        this.type = 'foorm';
+        this.title = (opts === null || opts === void 0 ? void 0 : opts.title) || '';
+        this.defaultAction = (opts === null || opts === void 0 ? void 0 : opts.defaultAction) || '';
+        this.entries = (opts === null || opts === void 0 ? void 0 : opts.entries) || [];
+    }
+    getField(name) {
+        return this.entries.find(e => e.field === name);
+    }
+    setValue(field, value) {
+        const entry = this.entries.find(e => e.field === field);
+        if (entry)
+            entry.value = value;
+    }
+    getEntries() {
+        return this.entries;
+    }
+    setEntries(entries) {
+        this.entries = entries;
+    }
+    getFormValidator() {
+        if (!this.fns)
+            this.fns = new ftring.FtringsPool();
+        const fields = {};
+        for (const entry of this.entries) {
+            if (entry.validators && entry.field) {
+                fields[entry.field] = {
+                    entry,
+                    validators: entry.validators.map(v => this.fns.getFn(v)),
+                };
+                if (!entry.optional)
+                    fields[entry.field].validators.unshift(this.fns.getFn('!!v || "Required"'));
+            }
+        }
+        return (inputs) => {
+            let passed = true;
+            const errors = {};
+            for (const [key, value] of Object.entries(fields)) {
+                const result = validate({
+                    v: inputs[key],
+                    validators: value.validators,
+                    entry: value.entry,
+                    inputs,
+                });
+                if (!result.passed) {
+                    passed = false;
+                    if (!errors[key]) {
+                        errors[key] = result.error || 'Wrong value';
+                    }
+                }
+            }
+            return {
+                passed,
+                errors,
+            };
+        };
+    }
+    genUIEntries() {
+        if (!this.fns)
+            this.fns = new ftring.FtringsPool();
+        let autoFocusAttached = false;
+        const uiEntries = [];
+        for (const entry of this.entries) {
+            const uiEntry = Object.assign({}, entry);
+            // apply autofocus to the first focusable element of this form
+            if (!autoFocusAttached && entry.focusable) {
+                autoFocusAttached = true;
+                uiEntry.autoFocus = true;
+            }
+            // create dynamic validators
+            if (entry.validators) {
+                uiEntry.validators = entry.validators.map(v => this.fns.getFn(v));
+                if (!entry.optional)
+                    uiEntry.validators.unshift(this.fns.getFn('!!v || "Required"'));
+            }
+            // create dynamic classes
+            if (entry.classes) {
+                if (typeof entry.classes === 'string') {
+                    uiEntry.classes = this.fns.getFn(entry.classes);
+                }
+                else {
+                    uiEntry.classes = {};
+                    for (const [key, value] of Object.entries(entry.classes)) {
+                        uiEntry.classes[key] = this.fns.getFn(value);
+                    }
+                }
+            }
+            // create dynamic disabled
+            if (entry.disabled) {
+                uiEntry.disabled = this.fns.getFn(entry.disabled);
+            }
+            uiEntries.push(uiEntry);
+            // assign next focus on enter
+            let next = undefined;
+            for (let i = uiEntries.length - 1; i >= 0; i--) {
+                const uiEntry = uiEntries[i];
+                uiEntry.id = [uiEntry.field, uiEntry.action || '', uiEntry.type, i].join('-');
+                if (uiEntry.nextFocusable) {
+                    if (next) {
+                        uiEntry.next = next;
+                    }
+                    next = uiEntry;
+                }
+            }
+        }
+        return uiEntries;
+    }
+}
+function validate(opts) {
+    for (const validator of (opts.validators || [])) {
+        const result = validator({ v: opts.v || '', inputs: opts.inputs, entry: opts.entry });
+        if (result !== true) {
+            return {
+                passed: false,
+                error: (result || 'Wrong value'),
+            };
+        }
+    }
+    return { passed: true };
+}
+
+exports.Foorm = Foorm;
+exports.validate = validate;

package/dist/index.d.ts

@@ -0,0 +1,70 @@
+export declare class Foorm {
+    title: string;
+    defaultAction: string;
+    protected type: string;
+    private fns;
+    protected entries: TFoormEntry[];
+    constructor(opts?: {
+        title: string;
+        entries?: TFoormEntry[];
+        defaultAction?: string;
+    });
+    getField(name: string): TFoormEntry | undefined;
+    setValue(field: string, value: unknown): void;
+    getEntries(): TFoormEntry[];
+    setEntries(entries: TFoormEntry[]): void;
+    getFormValidator(): ((inputs: Record<string, unknown>) => {
+        passed: boolean;
+        errors: Record<string, string>;
+    });
+    genUIEntries(): TFoormEntryUI[];
+}
+
+export declare type TDynamicFn<R = boolean | string> = ((ctx: TDynamicFnCtx) => R);
+
+export declare type TDynamicFnCtx = {
+    v: unknown;
+    inputs?: Record<string, unknown>;
+    entry?: TFoormEntry | TFoormEntryUI;
+};
+
+export declare type TFeComponentName = 'fe-input' | 'fe-button' | 'fe-checkbox' | 'fe-pin' | 'fe-select';
+
+export declare type TFoormEntry<FN = string> = {
+    component: string;
+    label?: string;
+    type?: string;
+    validators?: FN[];
+    disabled?: FN;
+    classes?: FN | Record<string, FN>;
+    optional?: boolean;
+    field?: string;
+    value?: unknown;
+    focusable?: boolean;
+    nextFocusable?: boolean;
+    action?: string;
+    validateOnBlur?: boolean;
+    validateBeforeAction?: boolean;
+    bind?: Record<string, unknown>;
+};
+
+export declare type TFoormEntryUI = TFoormEntry<TDynamicFn> & {
+    id: string;
+    autoFocus?: boolean;
+    next?: TFoormEntryUI;
+};
+
+export declare function validate(opts: {
+    v: unknown;
+    inputs?: Record<string, unknown>;
+    entry?: TFoormEntry;
+    validators: TDynamicFn[];
+}): {
+    passed: boolean;
+    error: string;
+} | {
+    passed: boolean;
+    error?: undefined;
+};
+
+export { }

package/dist/index.mjs

@@ -0,0 +1,125 @@
+import { FtringsPool } from '@prostojs/ftring';
+
+class Foorm {
+    constructor(opts) {
+        this.type = 'foorm';
+        this.title = (opts === null || opts === void 0 ? void 0 : opts.title) || '';
+        this.defaultAction = (opts === null || opts === void 0 ? void 0 : opts.defaultAction) || '';
+        this.entries = (opts === null || opts === void 0 ? void 0 : opts.entries) || [];
+    }
+    getField(name) {
+        return this.entries.find(e => e.field === name);
+    }
+    setValue(field, value) {
+        const entry = this.entries.find(e => e.field === field);
+        if (entry)
+            entry.value = value;
+    }
+    getEntries() {
+        return this.entries;
+    }
+    setEntries(entries) {
+        this.entries = entries;
+    }
+    getFormValidator() {
+        if (!this.fns)
+            this.fns = new FtringsPool();
+        const fields = {};
+        for (const entry of this.entries) {
+            if (entry.validators && entry.field) {
+                fields[entry.field] = {
+                    entry,
+                    validators: entry.validators.map(v => this.fns.getFn(v)),
+                };
+                if (!entry.optional)
+                    fields[entry.field].validators.unshift(this.fns.getFn('!!v || "Required"'));
+            }
+        }
+        return (inputs) => {
+            let passed = true;
+            const errors = {};
+            for (const [key, value] of Object.entries(fields)) {
+                const result = validate({
+                    v: inputs[key],
+                    validators: value.validators,
+                    entry: value.entry,
+                    inputs,
+                });
+                if (!result.passed) {
+                    passed = false;
+                    if (!errors[key]) {
+                        errors[key] = result.error || 'Wrong value';
+                    }
+                }
+            }
+            return {
+                passed,
+                errors,
+            };
+        };
+    }
+    genUIEntries() {
+        if (!this.fns)
+            this.fns = new FtringsPool();
+        let autoFocusAttached = false;
+        const uiEntries = [];
+        for (const entry of this.entries) {
+            const uiEntry = Object.assign({}, entry);
+            // apply autofocus to the first focusable element of this form
+            if (!autoFocusAttached && entry.focusable) {
+                autoFocusAttached = true;
+                uiEntry.autoFocus = true;
+            }
+            // create dynamic validators
+            if (entry.validators) {
+                uiEntry.validators = entry.validators.map(v => this.fns.getFn(v));
+                if (!entry.optional)
+                    uiEntry.validators.unshift(this.fns.getFn('!!v || "Required"'));
+            }
+            // create dynamic classes
+            if (entry.classes) {
+                if (typeof entry.classes === 'string') {
+                    uiEntry.classes = this.fns.getFn(entry.classes);
+                }
+                else {
+                    uiEntry.classes = {};
+                    for (const [key, value] of Object.entries(entry.classes)) {
+                        uiEntry.classes[key] = this.fns.getFn(value);
+                    }
+                }
+            }
+            // create dynamic disabled
+            if (entry.disabled) {
+                uiEntry.disabled = this.fns.getFn(entry.disabled);
+            }
+            uiEntries.push(uiEntry);
+            // assign next focus on enter
+            let next = undefined;
+            for (let i = uiEntries.length - 1; i >= 0; i--) {
+                const uiEntry = uiEntries[i];
+                uiEntry.id = [uiEntry.field, uiEntry.action || '', uiEntry.type, i].join('-');
+                if (uiEntry.nextFocusable) {
+                    if (next) {
+                        uiEntry.next = next;
+                    }
+                    next = uiEntry;
+                }
+            }
+        }
+        return uiEntries;
+    }
+}
+function validate(opts) {
+    for (const validator of (opts.validators || [])) {
+        const result = validator({ v: opts.v || '', inputs: opts.inputs, entry: opts.entry });
+        if (result !== true) {
+            return {
+                passed: false,
+                error: (result || 'Wrong value'),
+            };
+        }
+    }
+    return { passed: true };
+}
+
+export { Foorm, validate };

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "foorm",
+  "version": "0.0.1-alpha.1",
+  "description": "foorm",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/foormjs/foormjs.git",
+    "directory": "packages/foorm"
+  },
+  "keywords": [
+    "foorm",
+    "foormjs",
+    "forms",
+    "validations"
+  ],
+  "author": "Artem Maltsev",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/foormjs/foormjs/issues"
+  },
+  "homepage": "https://github.com/foormjs/foormjs/tree/main/packages/foorm#readme",
+  "dependencies": {
+    "@prostojs/ftring": "^0.0.3"
+  }
+}