@daracl/form 0.0.4 → 0.0.6

package/src/renderer/TabRender.ts

@@ -0,0 +1,229 @@
+import { FieldStyle, FormField } from "@t/FormField";
+import Render from "./Render";
+import { invalidMessage } from "src/util/validUtils";
+import { stringValidator } from "src/rule/stringValidator";
+import DaraForm from "src/DaraForm";
+import FormTemplate from "src/FormTemplate";
+import styleUtils from "src/util/styleUtils";
+import { FormOptions } from "@t/FormOptions";
+import * as utils from "src/util/utils";
+
+export default class TabRender extends Render {
+  private customFunction;
+  private tabContainerElement: HTMLElement;
+  constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm) {
+    super(daraForm, field, rowElement);
+
+    if (field.renderer) {
+      this.customFunction = field.renderer;
+    } else {
+      this.customFunction = {} as any;
+    }
+
+    this.mounted();
+  }
+
+  mounted() {
+    if (this.customFunction.mounted) {
+      (this.customFunction.mounted as any).call(this, this.field, this.rowElement);
+    }
+
+    this.tabContainerElement.querySelectorAll(".tab-item").forEach((tabItem) => {
+      tabItem.addEventListener("click", (e: any) => {
+        this.clickEventHandler(tabItem, e);
+      });
+    });
+  }
+
+  /**
+   * tab item click
+   *
+   * @param {Element} tabItem
+   * @param {*} evt
+   */
+  private clickEventHandler(tabItem: Element, evt: any) {
+    this.setActive(tabItem.getAttribute("data-tab-id") ?? "");
+  }
+
+  public setActive(tabId: string): void {
+    const tabItem = this.tabContainerElement.querySelector(`[data-tab-id="${tabId}"]`);
+
+    if (!tabItem) return;
+
+    if (!tabItem.classList.contains("active")) {
+      for (let item of tabItem?.parentElement?.children ?? []) {
+        item.classList.remove("active");
+      }
+      tabItem.classList.add("active");
+    }
+
+    const tabPanel = this.rowElement.querySelector(`[tab-panel-id="${tabId}"]`);
+
+    if (!tabPanel?.classList.contains("active")) {
+      for (let item of tabPanel?.parentElement?.children ?? []) {
+        item.classList.remove("active");
+      }
+
+      tabPanel?.classList.add("active");
+    }
+  }
+
+  static isDataRender(): boolean {
+    return false;
+  }
+
+  static isChildrenCreate(): boolean {
+    return false;
+  }
+
+  /**
+   * tab template
+   *
+   * @param {FormField} field
+   * @param {FormTemplate} formTemplate
+   * @param {FormOptions} options
+   * @returns {string} template string
+   */
+
+  createField() {
+    const field = this.field;
+
+    const formTemplate = this.daraForm.formTemplate;
+    const options = this.daraForm.getOptions();
+
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container") as HTMLElement;
+
+    //tab 이벤트 처리 할것.
+    let fieldStyle = styleUtils.fieldStyle(options, field);
+
+    fieldContainerElement.innerHTML = `
+        <div class="df-field ">
+          <div class="tab-header ${fieldStyle.tabAlignClass}"></div>
+        </div>
+        <div class="df-tab-body"></div>
+    `;
+
+    if (field.children) {
+      let firstFlag = true;
+
+      const formOptions = this.getForm().getOptions();
+
+      let fieldStyle: FieldStyle = styleUtils.fieldStyle(formOptions, field, null, formTemplate.isLabelHide(field));
+
+      for (const childField of field.children) {
+        childField.$parent = field;
+        formTemplate.addRowFieldInfo(childField);
+        let id = childField.$key;
+
+        let tabTemplate = `<span class="tab-item ${firstFlag ? "active" : ""}" data-tab-id="${id}"><a href="javascript:;">${childField.label}</a></span>`;
+
+        let tabBodyTemplate = `<div class="tab-panel ${firstFlag ? "active" : ""}" tab-panel-id="${id}">${Render.getDescriptionTemplate(childField)}
+          <div class="tab-group"></div>
+        </div>`;
+
+        const tabElement = utils.templateToElement(tabTemplate);
+        const tabBodyElement = utils.templateToElement(tabBodyTemplate);
+
+        firstFlag = false;
+        if (tabElement) {
+          fieldContainerElement.querySelector(".tab-header")?.appendChild(tabElement);
+        }
+
+        if (tabBodyElement) {
+          fieldContainerElement.querySelector(".df-tab-body")?.appendChild(tabBodyElement);
+
+          if (childField.children) {
+            let tabFormOptions = {
+              style: {
+                width: formOptions.style.width ?? "100%",
+                labelWidth: formOptions.style.labelWidth ?? 3,
+                valueWidth: formOptions.style.valueWidth ?? 9,
+                position: formOptions.style.position ?? "left-right",
+              },
+              useTypeValue: formOptions.useTypeValue,
+              autoCreate: false,
+              notValidMessage: "This form is not valid.",
+              fields: [],
+            } as FormOptions;
+
+            childField.$tabForm = new DaraForm(document.createElement("div"), tabFormOptions);
+
+            childField.$instance = new (childField.$renderType as any)(childField, tabBodyElement?.querySelector(".tab-group"), childField.$tabForm);
+
+            childField.$tabForm.formTemplate.childTemplate(childField, fieldStyle);
+          }
+        }
+      }
+
+      this.tabContainerElement = fieldContainerElement;
+    }
+  }
+
+  getValue(): any {
+    if (this.customFunction.getValue) {
+      return (this.customFunction.getValue as any).call(this, this.field, this.rowElement);
+    }
+
+    let allTabValue = {} as any;
+
+    let useTypeValue = this.getForm().getOptions().useTypeValue;
+
+    for (const childField of this.field.children) {
+      const childFieldValue = childField.$tabForm?.getValue(false);
+      if (useTypeValue) {
+        allTabValue[childField.$validName] = childFieldValue;
+      } else {
+        for (let [key, value] of Object.entries(childFieldValue)) {
+          allTabValue[key] = value;
+        }
+      }
+    }
+    return allTabValue;
+  }
+
+  setValue(value: any): void {
+    for (const childField of this.field.children) {
+      let tabChildValue = value[childField.$validName];
+
+      if (tabChildValue) {
+        childField.$tabForm?.setValue(tabChildValue);
+      }
+    }
+  }
+
+  reset() {}
+
+  getElement(): Element {
+    return this.rowElement;
+  }
+
+  valid(): any {
+    if (this.customFunction.valid) {
+      const validResult = (this.customFunction.valid as any).call(this, this.field, this.rowElement);
+
+      invalidMessage(this.field, this.rowElement, validResult);
+
+      return;
+    }
+
+    const field = this.field;
+
+    for (const childField of field.children) {
+      const validResult = childField.$tabForm?.validForm();
+
+      if (validResult && validResult.length > 0) {
+        const firstItem = validResult[0];
+
+        if (firstItem.message) {
+          firstItem.message = "[" + this.field.label + "] " + firstItem.message;
+
+          return firstItem;
+        }
+      }
+    }
+
+    return true;
+  }
+
+  focus(): void {}
+}

package/src/renderer/TextAreaRender.ts

@@ -0,0 +1,72 @@
+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 TextAreaRender extends Render {
+  private element: HTMLTextAreaElement;
+
+  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;
+
+    let rows = field.customOptions?.rows;
+    rows = +rows > 0 ? rows : 3;
+
+    fieldContainerElement.innerHTML = `
+        <div class="df-field">
+            <textarea name="${field.$xssName}" rows="${rows}" class="form-field textarea help-icon"></textarea>
+        </div> 
+        ${Render.getDescriptionTemplate(field)}
+        <div class="help-message"></div>
+    `;
+
+    this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`) as HTMLTextAreaElement;
+  }
+
+  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/TextRender.ts

@@ -0,0 +1,68 @@
+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 TextRender 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="text" name="${field.$xssName}" class="form-field text help-icon" />
+      </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(): HTMLInputElement {
+    return this.element;
+  }
+
+  valid(): any {
+    const validResult = stringValidator(this.getValue(), this.field);
+
+    invalidMessage(this.field, this.rowElement, validResult);
+
+    return validResult;
+  }
+}

package/src/rule/fileValidator.ts

@@ -0,0 +1,26 @@
+import { FileInfo, FormField } from "@t/FormField";
+import { ValidResult } from "@t/ValidResult";
+import { RULES } from "src/constants";
+
+/**
+ * file validator
+ *
+ * @param {HTMLInputElement} element
+ * @param {FormField} field
+ * @param {FileInfo[]} fileList
+ * @returns {(ValidResult | boolean)}
+ */
+export const fileValidator = (element: HTMLInputElement, field: FormField, fileList: FileInfo[]): ValidResult | boolean => {
+  const result: ValidResult = { name: field.name, constraint: [] };
+
+  if (field.required && fileList.length < 1) {
+    result.constraint.push(RULES.REQUIRED);
+    return result;
+  }
+
+  if (result.constraint.length > 0) {
+    return result;
+  }
+
+  return true;
+};

package/src/rule/numberValidator.ts

@@ -0,0 +1,96 @@
+import { FormField } from "@t/FormField";
+import { ValidResult } from "@t/ValidResult";
+import { RULES } from "src/constants";
+import { validator } from "./validator";
+import * as utils from "src/util/utils";
+
+/**
+ * 숫자 유효성 체크
+ *
+ * @param {string} value
+ * @param {FormField} field
+ * @returns {(ValidResult | boolean)}
+ */
+export const numberValidator = (value: string, field: FormField): ValidResult | boolean => {
+  if (!field.$instance.isEnableView()) {
+    return true;
+  }
+
+  const result: ValidResult = { name: field.name, constraint: [] };
+  const numValue = Number(value);
+
+  if (field.required && utils.isBlank(value)) {
+    result.constraint.push(RULES.REQUIRED);
+    return result;
+  }
+
+  if (!utils.isNumber(value)) {
+    result.constraint.push(RULES.NAN);
+    return result;
+  }
+
+  if (validator(value, field, result) !== true) {
+    return result;
+  }
+
+  const rule = field.rule;
+  if (rule) {
+    const isMinimum = utils.isNumber(rule.minimum),
+      isMaximum = utils.isNumber(rule.maximum);
+
+    let minRule = false,
+      minExclusive = false,
+      maxRule = false,
+      maxExclusive = false;
+
+    if (isMinimum) {
+      if (rule.exclusiveMinimum && numValue <= rule.minimum) {
+        minExclusive = true;
+      } else if (numValue < rule.minimum) {
+        minRule = true;
+      }
+    }
+
+    if (isMaximum) {
+      if (rule.exclusiveMaximum && numValue >= rule.maximum) {
+        maxExclusive = true;
+      } else if (numValue > rule.maximum) {
+        maxRule = true;
+      }
+    }
+
+    if (isMinimum && isMaximum && (minRule || minExclusive || maxRule || maxExclusive)) {
+      if (rule.exclusiveMinimum && rule.exclusiveMaximum && (minExclusive || maxExclusive)) {
+        result.constraint.push(RULES.BETWEEN_EXCLUSIVE_MINMAX);
+      } else if (minExclusive) {
+        result.constraint.push(RULES.BETWEEN_EXCLUSIVE_MIN);
+      } else if (maxExclusive) {
+        result.constraint.push(RULES.BETWEEN_EXCLUSIVE_MAX);
+      } else {
+        result.constraint.push(RULES.BETWEEN);
+      }
+    } else {
+      if (minExclusive) {
+        result.constraint.push(RULES.EXCLUSIVE_MIN);
+      }
+
+      if (maxExclusive) {
+        result.constraint.push(RULES.EXCLUSIVE_MAX);
+      }
+
+      if (minRule) {
+        result.constraint.push(RULES.MIN);
+      }
+
+      if (maxRule) {
+        result.constraint.push(RULES.MAX);
+      }
+    }
+  }
+
+  if (result.constraint.length > 0) {
+    return result;
+  }
+
+  return true;
+};

package/src/rule/regexpValidator.ts

@@ -0,0 +1,45 @@
+import { FormField } from "@t/FormField";
+import { ValidResult } from "@t/ValidResult";
+
+const regexp = {
+  mobile: /^\d{3}-\d{3,4}-\d{4}$/,
+  email: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+  url: /^(?:(?:https?|HTTPS?|ftp|FTP):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)(?:\.(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)*(?:\.(?:[a-zA-Z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/,
+  number: /\d$/,
+  alpha: /^[a-zA-Z]+$/,
+  "alpha-num": /^[a-zA-Z0-9]+$/,
+  variable: /^[a-zA-Z0-9_$][a-zA-Z0-9_$]*$/,
+  "number-char": /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]/,
+  "upper-char": /^(?=.*?[A-Z])(?=.*?[a-z])/,
+  "upper-char-special": /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[#?!@$%^&*-])/,
+  "upper-char-special-number": /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]/,
+};
+
+/**
+ * 정규식 유효성 체크.
+ *
+ * @param {string} value
+ * @param {FormField} field
+ * @param {(ValidResult | undefined)} result
+ * @returns {ValidResult}
+ */
+export const regexpValidator = (value: string, field: FormField, result: ValidResult): ValidResult => {
+  if (!field.$instance.isEnableView()) {
+    return { name: field.name, constraint: [] };
+  }
+
+  if (typeof result === "undefined") {
+    result = { name: field.name, constraint: [] };
+  }
+
+  const regexpType = field.regexpType;
+
+  if (regexpType) {
+    if (!regexp[regexpType].test(value)) {
+      result.regexp = regexpType;
+      return result;
+    }
+  }
+
+  return result;
+};

package/src/rule/stringValidator.ts

@@ -0,0 +1,64 @@
+import { FormField } from "@t/FormField";
+import { ValidResult } from "@t/ValidResult";
+import { RULES } from "src/constants";
+import * as utils from "src/util/utils";
+import { validator } from "./validator";
+
+/**
+ * string validator
+ *
+ * @param {string} value
+ * @param {FormField} field
+ * @returns {(ValidResult | boolean)}
+ */
+export const stringValidator = (value: string, field: FormField): ValidResult | boolean => {
+  if (!field.$instance.isEnableView()) {
+    return true;
+  }
+
+  let result: ValidResult = { name: field.name, constraint: [] };
+
+  if (field.required && utils.isBlank(value)) {
+    result.constraint.push(RULES.REQUIRED);
+    return result;
+  }
+  const validResult = validator(value, field, result);
+  if (validResult !== true) {
+    return validResult;
+  }
+
+  const rule = field.rule;
+
+  if (rule) {
+    const valueLength = value.length;
+
+    const isMinNumber = utils.isNumber(rule.minLength),
+      isMaxNumber = utils.isNumber(rule.maxLength);
+
+    let minRule = false,
+      maxRule = false;
+    if (isMinNumber && valueLength < rule.minLength) {
+      minRule = true;
+    }
+    if (isMaxNumber && valueLength > rule.maxLength) {
+      maxRule = true;
+    }
+
+    if (isMinNumber && isMaxNumber && (minRule || maxRule)) {
+      result.constraint.push(RULES.BETWEEN);
+    } else {
+      if (minRule) {
+        result.constraint.push(RULES.MIN_LENGTH);
+      }
+
+      if (maxRule) {
+        result.constraint.push(RULES.MAX_LENGTH);
+      }
+    }
+    if (result.constraint.length > 0) {
+      return result;
+    }
+  }
+
+  return true;
+};

package/src/rule/validator.ts

@@ -0,0 +1,49 @@
+import { FormField } from "@t/FormField";
+import { ValidResult } from "@t/ValidResult";
+import { regexpValidator } from "./regexpValidator";
+import * as utils from "src/util/utils";
+
+/**
+ *  validator  ,  regexp 체크 .
+ *
+ * @param {string} value field value
+ * @param {FormField} field field 정보
+ * @param {ValidResult} result
+ * @returns {(ValidResult | boolean)}
+ */
+export const validator = (value: string, field: FormField, result: ValidResult): ValidResult | boolean => {
+  if (field.validator) {
+    result.validator = field.validator(field, value);
+    if (typeof result.validator === "object") {
+      return result;
+    }
+  }
+
+  result = regexpValidator(value, field, result);
+
+  if (result.regexp) {
+    return result;
+  }
+
+  if (field.different) {
+    const diffFieldName = field.different.field;
+    const diffField = field.$instance.getForm().getField(diffFieldName);
+
+    if (!utils.isEmpty(diffField) && field.$instance.getValue() == diffField.$instance.getValue()) {
+      result.message = field.different.message;
+      return result;
+    }
+  }
+
+  if (field.identical) {
+    const diffFieldName = field.identical.field;
+    const diffField = field.$instance.getForm().getField(diffFieldName);
+
+    if (!utils.isEmpty(diffField) && field.$instance.getValue() != diffField.$instance.getValue()) {
+      result.message = field.identical.message;
+      return result;
+    }
+  }
+
+  return true;
+};

package/src/types/DataMap.d.ts

@@ -0,0 +1,17 @@
+/**
+ *
+ * @interface StringKeyMap
+ * @typedef {StringKeyMap}
+ */
+export interface StringKeyMap {
+  [key: string]: any;
+}
+
+/**
+ *
+ * @interface NumberKeyMap
+ * @typedef {NumberKeyMap}
+ */
+export interface NumberKeyMap {
+  [key: number]: any;
+}