@daracl/form 0.0.11 → 0.0.13

package/src/renderer/PasswordRender.ts

@@ -1,69 +0,0 @@
-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

@@ -1,191 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,194 +0,0 @@
-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] || "";
-  }
-}