@daracl/form 0.0.11 → 0.0.13

package/src/renderer/TabRender.ts

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

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

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

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

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

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

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

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

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