custom app form

src/components/app-dropdown/AppDropdownElement.ts

@@ -0,0 +1,74 @@
+import { attr, controller, target } from "@github/catalyst";
+import { firstUpper } from "core/utils";
+import { html, TemplateResult } from "@github/jtml";
+import { RouterService } from "core/services";
+import randomId from "core/utils/random-id";
+import validator from "validator";
+import { validatorErrors } from "core/constants";
+import { BaseComponentElement } from "common/";
+
+@controller
+class AppDropdownElement extends BaseComponentElement {
+    @attr name: string;
+    @attr type: string;
+    @attr label: string;
+    @attr rules: string;
+    @target main: HTMLElement;
+    @target inp: HTMLElement;
+    error: string;
+    randId: string;
+    constructor() {
+        super();
+    }
+
+    public elementConnected = (): void => {
+        this.randId = `${name}${randomId()}`;
+        this.update();
+    };
+
+    get valid(): boolean {
+        return !!this.error;
+    }
+
+    get required(): boolean {
+        return this.rules.includes("required");
+    }
+
+    validate(): boolean {
+        let _return = true;
+        const rules = this.rules?.split("|").filter((a) => a);
+        const value = (this.inp as HTMLInputElement)?.value;
+        rules
+            .slice()
+            .reverse()
+            .forEach((rule) => {
+                let valid = true;
+                if (rule == "required") {
+                    if (value === "") valid = false;
+                } else {
+                    if (validator.hasOwnProperty(rule)) {
+                        valid = validator?.[rule]?.(value);
+                    }
+                }
+                if (!valid) {
+                    const error = validatorErrors[rule]?.replaceAll(
+                        "{- name}",
+                        firstUpper(this.name?.toString())
+                    );
+                    _return = false;
+                    this.error = error;
+                }
+            });
+        if (_return) {
+            this.error = null;
+        }
+        this.update();
+        return _return;
+    }
+
+    render = (): TemplateResult => {
+        return html``;
+    };
+}
+
+export type { AppDropdownElement };

src/components/app-form/AppFormElement.ts

@@ -0,0 +1,123 @@
+import { attr, controller, target } from "@github/catalyst";
+import { html, TemplateResult, unsafeHTML } from "@github/jtml";
+import { BaseComponentElement } from "common/";
+import { InputFieldElement } from "components/input-field/InputFieldElement";
+import { querys } from "core/utils";
+
+@controller
+class AppFormElement extends BaseComponentElement {
+    @target formElement: HTMLElement;
+    @target innerSlot: HTMLElement;
+    @querys inputField: NodeListOf<InputFieldElement>;
+    @attr custom: string;
+    slotted: any;
+    isValid: boolean = false;
+    error: string;
+    constructor() {
+        super();
+    }
+
+    public inputChange = (e) => {
+        this.validate();
+        this.update();
+    };
+
+    public keyUp = (e) => {
+        if (e.keyCode === 13) {
+            this.onSubmit(e);
+        }
+    };
+
+    public onSubmit = (e) => {
+        e.preventDefault();
+        if (!this.valid) {
+            return;
+        }
+        const actionString = this.custom;
+        if (actionString) {
+            const methodSep = actionString.lastIndexOf("#");
+            const tag = actionString.slice(0, methodSep);
+            const method = actionString.slice(methodSep + 1);
+
+            const element = this.appMain.querySelector(tag);
+            if (element) {
+                element?.[method]?.(e);
+            }
+        }
+        return false;
+    };
+
+    public validate = () => {
+        this.isValid = true;
+        this.inputField?.forEach((input) => {
+            if (input?.error) {
+                this.isValid = false;
+            }
+        });
+    };
+
+    public setError = (error) => {
+        this.error = error;
+        this.update();
+    };
+
+    public goBack = (e) => {
+        e.preventDefault();
+        this.routerService?.goBack();
+    };
+
+    get valid() {
+        let _valid = 0;
+        this.inputField?.forEach((input) => {
+            if (input.required && (input.inp as HTMLInputElement).value) {
+                _valid++;
+            }
+        });
+        return _valid == this.inputField?.length;
+    }
+
+    elementConnected = (): void => {
+        const _template = document.createElement("template");
+        const _slot = this.innerHTML;
+        _template.innerHTML = _slot;
+        this.innerHTML = null;
+        this.update();
+
+        this.formElement.replaceChild(_template.content, this.innerSlot);
+    };
+
+    render = (): TemplateResult => {
+        const renderSubmit = (valid: boolean) => {
+            if (!valid) {
+                return html` <button type="submit" disabled>Submit</button> `;
+            }
+            return html` <button type="submit">Submit</button> `;
+        };
+        const renderError = (error: string) => {
+            if (error) {
+                return html`<span>${error}</span>`;
+            }
+            return html``;
+        };
+        const renderCancel = () => {
+            return html`<button
+                type="button"
+                data-action="click:app-form#goBack"
+            >
+                Cancel
+            </button>`;
+        };
+
+        return html`<form
+            data-action="submit:app-form#onSubmit"
+            data-target="app-form.formElement"
+        >
+            <slot data-target="app-form.innerSlot"></slot>
+            ${renderError(this.error)}${renderSubmit(
+                this.isValid
+            )}${renderCancel()}
+        </form>`;
+    };
+}
+
+export type { AppFormElement };

src/components/index.ts

@@ -8,6 +8,7 @@ export * from "./app-menu/AppMenuElement";
 export * from "./input-field/InputFieldElement";
 export * from "./app-loader/AppLoaderElement";
 export * from "./circle-loader/CircleLoaderElement";
+export * from "./app-form/AppFormElement";
 
 // LAST
 export * from "./app-main/AppMainElement";

src/components/input-field/InputFieldElement.ts

@@ -1,11 +1,12 @@
 import { attr, controller, target } from "@github/catalyst";
-import { firstUpper } from "core/utils";
+import { closest, firstUpper } from "core/utils";
 import { html, TemplateResult } from "@github/jtml";
 import { RouterService } from "core/services";
 import randomId from "core/utils/random-id";
 import validator from "validator";
 import { validatorErrors } from "core/constants";
 import { BaseComponentElement } from "common/";
+import { AppFormElement } from "components/app-form/AppFormElement";
 
 @controller
 class InputFieldElement extends BaseComponentElement {
@@ -15,7 +16,9 @@ class InputFieldElement extends BaseComponentElement {
     @attr rules: string;
     @target main: HTMLElement;
     @target inp: HTMLElement;
+    @closest appForm: AppFormElement;
     error: string;
+    displayError: boolean;
     randId: string;
     constructor() {
         super();
@@ -34,7 +37,7 @@ class InputFieldElement extends BaseComponentElement {
         return this.rules.includes("required");
     }
 
-    validate(): boolean {
+    validate = (): boolean => {
         let _return = true;
         const rules = this.rules?.split("|").filter((a) => a);
         const value = (this.inp as HTMLInputElement)?.value;
@@ -62,18 +65,55 @@ class InputFieldElement extends BaseComponentElement {
         if (_return) {
             this.error = null;
         }
-        this.update();
         return _return;
-    }
+    };
+
+    validateDisplay = () => {
+        if (!this.validate()) {
+            this.displayError = true;
+        } else {
+            this.displayError = false;
+        }
+        this.update();
+    };
+
+    inputChange = (e) => {
+        this.validate();
+        this.appForm?.inputChange(e);
+    };
 
     render = (): TemplateResult => {
+        const renderMessage = (label: string) => {
+            if (this.label) {
+                return html`<label for="${this.randId}"
+                    >${this.label}${this.required ? " (*)" : ""}</label
+                >`;
+            }
+            return html``;
+        };
+
+        const renderError = (displayError: boolean, error: string) => {
+            if (displayError) {
+                return html`<span>${error}</span>`;
+            }
+            return html``;
+        };
+
+        const renderInput = (type) => {
+            return html` <input
+                type="${this.type}"
+                data-target="input-field.inp"
+                data-action="
+                    input:input-field#inputChange
+                    keyup:app-form#keyUp
+                    blur:input-field#validateDisplay
+                "
+            />`;
+        };
+
         return html`<div data-target="input-field.main">
-            ${this.label &&
-            html`<label for="${this.randId}"
-                >${this.label}${this.required ? " (*)" : ""}</label
-            >`}
-            <input type="${this.type}" data-target="input-field.inp" />
-            ${this.error && html`<span>${this.error}</span>`}
+            ${renderMessage(this.label)} ${renderInput(this.type)}
+            ${renderError(this.displayError, this.error)}
         </div>`;
     };
 }