@daracl/form 0.0.4 → 0.0.6

package/src/renderer/PasswordRender.ts

@@ -0,0 +1,69 @@
+import { FormField } from "@t/FormField";
+import Render from "./Render";
+import { stringValidator } from "src/rule/stringValidator";
+import { resetRowElementStyleClass, invalidMessage } from "src/util/validUtils";
+import { inputEvent } from "src/event/renderEvents";
+import DaraForm from "src/DaraForm";
+
+export default class PasswordRender extends Render {
+  private element: HTMLInputElement;
+
+  constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm) {
+    super(daraForm, field, rowElement);
+
+    this.mounted();
+    this.setDefaultOption();
+    this.setDefaultInfo();
+  }
+
+  mounted() {
+    inputEvent(this.field, this.element, this);
+  }
+
+  createField() {
+    const field = this.field;
+
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container") as HTMLElement;
+
+    fieldContainerElement.innerHTML = `
+        <div class="df-field">
+            <input type="password" name="${field.$xssName}" class="form-field password help-icon" autocomplete="off" />
+        </div>
+        ${Render.getDescriptionTemplate(field)}
+        <div class="help-message"></div>
+    `;
+
+    this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`) as HTMLInputElement;
+  }
+
+  getValue() {
+    return this.element.value;
+  }
+
+  setValue(value: any, changeCheckFlag?: boolean): void {
+    if (changeCheckFlag !== false && this.changeEventCall(this.field, null, this, value) === false) {
+      this.element.value = this.field.$value;
+      return;
+    }
+    this.field.$value = value;
+    this.element.value = value;
+  }
+
+  reset() {
+    this.setDefaultInfo();
+    this.setDisabled(false);
+    resetRowElementStyleClass(this.rowElement);
+  }
+
+  getElement(): HTMLElement {
+    return this.element;
+  }
+
+  valid(): any {
+    const validResult = stringValidator(this.getValue(), this.field);
+
+    invalidMessage(this.field, this.rowElement, validResult);
+
+    return validResult;
+  }
+}

package/src/renderer/RadioRender.ts

@@ -0,0 +1,191 @@
+import { FormField, ValuesInfo } from "@t/FormField";
+import Render from "./Render";
+import { ValidResult } from "@t/ValidResult";
+import { RULES } from "src/constants";
+import { resetRowElementStyleClass, invalidMessage } from "src/util/validUtils";
+import { customChangeEventCall } from "src/event/renderEvents";
+import DaraForm from "src/DaraForm";
+import * as utils from "src/util/utils";
+
+export default class RadioRender extends Render {
+  private defaultCheckValue;
+
+  constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm) {
+    super(daraForm, field, rowElement);
+
+    this.defaultCheckValue = "";
+    let initDefaultValue = [] as any;
+    if (!utils.isUndefined(field.defaultValue)) {
+      initDefaultValue = field.defaultValue;
+    }
+
+    const valueKey = RadioRender.valuesValueKey(field);
+    let initDefaultValueFlag = false;
+    this.field.listItem?.list?.forEach((item) => {
+      let itemValue = item[valueKey];
+      if (item.selected) {
+        this.defaultCheckValue = itemValue;
+      }
+
+      if (initDefaultValue == itemValue) {
+        initDefaultValueFlag = true;
+      }
+    });
+
+    // 처리 할것.
+
+    if (initDefaultValueFlag) {
+      this.defaultCheckValue = initDefaultValue;
+    } else if (!this.defaultCheckValue) {
+      this.defaultCheckValue = this.field.listItem?.list?.length > 0 ? this.field.listItem?.list[0][valueKey] : "";
+    }
+
+    this.mounted();
+    this.setDefaultOption();
+    this.setValue(this.defaultCheckValue, false);
+  }
+
+  public mounted() {
+    this.initEvent();
+  }
+
+  public initEvent() {
+    const checkboxes = this.rowElement.querySelectorAll(this.getSelector());
+
+    checkboxes.forEach((ele) => {
+      ele.addEventListener("change", (e: Event) => {
+        customChangeEventCall(this.field, e, this, this.getValue());
+
+        this.valid();
+      });
+    });
+  }
+
+  public getSelector() {
+    return `input[type="radio"][name="${this.field.$xssName}"]`;
+  }
+
+  createField() {
+    const field = this.field;
+
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container") as HTMLElement;
+
+    const templates: string[] = [];
+    const fieldName = field.$xssName;
+
+    const labelKey = Render.valuesLabelKey(field);
+    const valueKey = Render.valuesValueKey(field);
+
+    templates.push(`<div class="df-field"><div class="field-group">`);
+
+    field.listItem?.list?.forEach((val) => {
+      const radioVal = val[valueKey];
+
+      templates.push(
+        `<span class="field ${field.orientation == "vertical" ? "vertical" : "horizontal"}">
+        <label>
+            <input type="radio" name="${fieldName}" value="${radioVal}" class="form-field radio" ${val.selected ? "checked" : ""} ${val.disabled ? "disabled" : ""}/>
+            ${Render.valuesLabelValue(labelKey, val)}
+        </label>
+        </span>
+                `
+      );
+    });
+    templates.push(`<i class="daracl-icon help-icon"></i></div></div>
+        ${Render.getDescriptionTemplate(field)}
+     <div class="help-message"></div>
+    `);
+
+    fieldContainerElement.innerHTML = templates.join("");
+
+    this.initEvent();
+  }
+
+  public setValueItems(items: any): void {
+    const containerEle = this.rowElement.querySelector(".df-field-container");
+    if (containerEle) {
+      if (this.field.listItem) {
+        this.field.listItem.list = items;
+      } else {
+        this.field.listItem = {
+          list: items,
+        } as ValuesInfo;
+      }
+
+      this.createField();
+
+      if (!utils.isBlank(this.field.$value)) {
+        const currentValue = this.field.$value;
+        this.field.$value = "";
+        this.setValue(currentValue);
+      }
+    }
+  }
+
+  getValue() {
+    return (this.rowElement.querySelector(`[name="${this.field.$xssName}"]:checked`) as HTMLInputElement)?.value;
+  }
+
+  setValue(value: any, changeCheckFlag?: boolean): void {
+    if (changeCheckFlag !== false && this.changeEventCall(this.field, null, this, value) === false) {
+      value = this.field.$value;
+    }
+
+    this.field.$value = value;
+    if (value === true) {
+      (this.rowElement.querySelector(`[name="${this.field.$xssName}"]`) as HTMLInputElement).checked = true;
+      return;
+    }
+
+    if (value === false) {
+      (this.rowElement.querySelector(`[name="${this.field.$xssName}"]`) as HTMLInputElement).checked = false;
+      return;
+    }
+
+    const elements = this.rowElement.querySelectorAll(this.getSelector());
+
+    elements.forEach((ele) => {
+      let radioEle = ele as HTMLInputElement;
+      if (radioEle.value == value) {
+        radioEle.checked = true;
+      } else {
+        radioEle.checked = false;
+      }
+    });
+  }
+
+  reset() {
+    this.setValue(this.defaultCheckValue, false);
+    this.setDisabled(false);
+    resetRowElementStyleClass(this.rowElement);
+  }
+
+  getElement(): any {
+    return this.rowElement.querySelectorAll(this.getSelector());
+  }
+
+  public focus() {
+    const elements = this.getElement();
+
+    if (elements && elements.length > 0) {
+      this.getElement()[0].focus();
+    }
+  }
+
+  valid(): any {
+    const value = this.getValue();
+
+    let validResult: ValidResult | boolean = true;
+
+    if (this.field.required) {
+      if (utils.isBlank(value)) {
+        validResult = { name: this.field.name, constraint: [] };
+        validResult.constraint.push(RULES.REQUIRED);
+      }
+    }
+
+    invalidMessage(this.field, this.rowElement, validResult);
+
+    return validResult;
+  }
+}

package/src/renderer/RangeRender.ts

@@ -0,0 +1,79 @@
+import { FormField } from "@t/FormField";
+import Render from "./Render";
+import { numberValidator } from "src/rule/numberValidator";
+import { resetRowElementStyleClass, invalidMessage } from "src/util/validUtils";
+import { customChangeEventCall, numberInputEvent } from "src/event/renderEvents";
+import DaraForm from "src/DaraForm";
+
+export default class RangeRender extends Render {
+  private element: HTMLInputElement;
+  private rangeNumElement: Element;
+
+  constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm) {
+    super(daraForm, field, rowElement);
+
+    this.rangeNumElement = rowElement.querySelector(".range-num") as Element;
+
+    this.mounted();
+    this.setDefaultOption();
+    this.setDefaultInfo();
+  }
+
+  mounted() {
+    this.element.addEventListener("input", (e: any) => {
+      this.rangeNumElement.innerHTML = e.target.value;
+
+      this.element.setAttribute("title", e.target.value);
+      customChangeEventCall(this.field, e, this, this.getValue());
+      this.valid();
+    });
+  }
+
+  createField() {
+    const field = this.field;
+
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container") as HTMLElement;
+
+    fieldContainerElement.innerHTML = `
+        <div class="df-field">
+            <span class="range-num">${field.defaultValue ? field.defaultValue : 0}</span>
+            <input type="range" name="${field.$xssName}" class="form-field range help-icon" min="${field.rule.minimum}" max="${field.rule.maximum}"/>
+        </div> 
+        ${Render.getDescriptionTemplate(field)}
+        <div class="help-message"></div>
+       `;
+
+    this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`) as HTMLInputElement;
+  }
+
+  getValue() {
+    return this.element.value;
+  }
+
+  setValue(value: any, changeCheckFlag?: boolean): void {
+    if (changeCheckFlag !== false && this.changeEventCall(this.field, null, this, value) === false) {
+      this.element.value = this.field.$value;
+      return;
+    }
+    this.field.$value = value;
+    this.element.value = value;
+  }
+
+  reset() {
+    this.setDefaultInfo();
+    this.setDisabled(false);
+    resetRowElementStyleClass(this.rowElement);
+  }
+
+  getElement(): HTMLElement {
+    return this.element;
+  }
+
+  valid(): any {
+    const validResult = numberValidator(this.getValue(), this.field);
+
+    invalidMessage(this.field, this.rowElement, validResult);
+
+    return validResult;
+  }
+}

package/src/renderer/Render.ts

@@ -0,0 +1,194 @@
+import { FormField } from "@t/FormField";
+import { ValidResult } from "@t/ValidResult";
+import DaraForm from "src/DaraForm";
+import * as utils from "src/util/utils";
+
+export default abstract class Render {
+  protected daraForm;
+  protected rowElement;
+  protected field;
+
+  private enableView: boolean = true;
+
+  constructor(form: DaraForm, field: FormField, rowElement: HTMLElement) {
+    this.daraForm = form;
+    this.field = field;
+    this.rowElement = rowElement;
+    this.createField();
+
+    if (field.tooltip) rowElement.querySelector(".df-tooltip")?.setAttribute("tooltip", field.tooltip);
+  }
+
+  public setDefaultInfo() {
+    if (utils.isUndefined(this.field.defaultValue)) {
+      this.setValue("", false);
+    } else {
+      this.setValue(this.field.defaultValue, false);
+    }
+
+    if (!utils.isUndefined(this.field.placeholder)) {
+      const ele = this.getElement();
+      if (ele instanceof Element) {
+        ele.setAttribute("placeholder", this.field.placeholder);
+      }
+    }
+  }
+
+  public setDefaultOption() {
+    this.setDisabled(this.field.disabled ?? false);
+  }
+
+  public addChildField(element: Element) {
+    this.rowElement.querySelector(".df-field-container")?.append(element);
+  }
+
+  static isDataRender(): boolean {
+    return true;
+  }
+
+  static isChildrenCreate(): boolean {
+    return true;
+  }
+
+  public getForm(): DaraForm {
+    return this.daraForm;
+  }
+
+  public abstract mounted(): void;
+  public abstract getValue(): any;
+  public abstract setValue(value: any, changeCheckFlag?: boolean): void;
+  public abstract reset(): void;
+  public abstract getElement(): any;
+  public abstract valid(): ValidResult | boolean;
+  public abstract createField(): void;
+
+  public setValueItems(value: any): void {}
+
+  public static getDescriptionTemplate(field: FormField): string {
+    return field.description ? `<div class="df-description">${field.description}</div>` : "";
+  }
+
+  public changeEventCall(field: FormField, e: Event | null, rederInfo: Render, fieldValue: any): boolean | undefined {
+    if (field.onChange) {
+      let changeInfo: any = {
+        field: field,
+        evt: e,
+        oldValue: field.$value,
+        value: fieldValue,
+      };
+
+      if (field.listItem?.list) {
+        let valuesItem = [];
+        const valueKey = Render.valuesValueKey(field);
+
+        for (let val of field.listItem.list) {
+          let changeVal = val[valueKey];
+          if (utils.isString(fieldValue)) {
+            if (changeVal == fieldValue) {
+              valuesItem.push(val);
+              break;
+            }
+          } else if (utils.isArray(fieldValue)) {
+            if (fieldValue.includes(changeVal)) {
+              valuesItem.push(val);
+            }
+          }
+        }
+
+        changeInfo.valueItems = valuesItem;
+      }
+
+      if (changeInfo.oldValue != changeInfo.value && field.onChange.call(null, changeInfo) === false) {
+        rederInfo.setValue(field.$value, false);
+        return false;
+      }
+
+      field.$value = changeInfo.value;
+    }
+
+    this.daraForm.conditionCheck();
+  }
+
+  public focus() {
+    this.getElement().focus();
+  }
+
+  public isEnableView() {
+    return this.enableView;
+  }
+
+  public show() {
+    this.enableView = true;
+    this.rowElement.classList.remove("df-hidden");
+  }
+
+  public hide() {
+    this.enableView = false;
+    if (!this.rowElement.classList.contains("df-hidden")) {
+      this.rowElement.classList.add("df-hidden");
+    }
+  }
+
+  /**
+   * 설명 추가
+   *
+   * @public
+   * @param {string} desc
+   */
+  public setDescription(desc: string) {
+    const descEle = this.rowElement.querySelector(".df-description");
+    if (descEle) {
+      descEle.innerHTML = desc;
+    } else {
+      const fieldEle = this.rowElement.querySelector(".df-field");
+      if (fieldEle) {
+        const parser = new DOMParser();
+        this.field.description = desc;
+        const descEle = parser.parseFromString(Render.getDescriptionTemplate(this.field), "text/html").querySelector(".df-description");
+
+        if (descEle) fieldEle.parentNode?.insertBefore(descEle, fieldEle.nextSibling);
+      }
+    }
+  }
+
+  public setActive(id: string): void {
+    //console.log("parent");
+  }
+
+  public setDisabled(flag: boolean) {
+    const ele = this.getElement();
+    if (ele instanceof HTMLElement) {
+      if (flag === false) {
+        this.getElement().removeAttribute("disabled");
+      } else {
+        this.getElement().setAttribute("disabled", true);
+      }
+    }
+  }
+
+  public commonValidator() {
+    //this.field.diff
+  }
+
+  public static valuesValueKey(field: FormField): string {
+    return field.listItem?.valueField ? field.listItem.valueField : "value";
+  }
+
+  public static valuesLabelKey(field: FormField): string {
+    return field.listItem?.labelField ? field.listItem.labelField : "label";
+  }
+
+  public static valuesLabelValue(label: string, val: any) {
+    let replaceFlag = false;
+    const resultValue = label.replace(/\{\{([A-Za-z0-9_.]*)\}\}/g, (match, key) => {
+      replaceFlag = true;
+      return val[key] || "";
+    });
+
+    if (replaceFlag) {
+      return resultValue;
+    }
+
+    return val[label] || "";
+  }
+}