@daracl/form 0.0.11 → 0.0.13

package/src/types/FormField.d.ts

@@ -1,129 +0,0 @@
-import DaraForm from "src/DaraForm";
-import { RENDER_TYPE, REGEXP_TYPE, TEXT_ALIGN_TYPE, FIELD_POSITION, ORIENTATION_TYPE } from "src/constants";
-import Render from "src/renderer/Render";
-
-export interface OptionCallback {
-  (...params: any[]): any;
-}
-
-export interface ValuesInfo {
-  labelField: string;
-  valueField: string;
-  list: any[];
-  orientation: ORIENTATION_TYPE;
-}
-
-/**
- * 첨부 파일 정보
- *
- * @export
- * @interface FileInfo
- * @typedef {FileInfo}
- */
-export interface FileInfo {
-  fileId: string;
-  fileName: string;
-  fileSize: number;
-  $seq: number;
-  lastModified?: any;
-}
-
-/**
- * 상태 체크 정보
- *
- * @export
- * @interface ConditionInfo
- * @typedef {ConditionInfo}
- */
-export interface ConditionInfo {
-  show: boolean;
-  field: string;
-  eq: any;
-  custom?: OptionCallback;
-}
-
-export interface FieldStyle {
-  rowStyleClass?: string;
-  fieldClass?: string;
-  fieldStyle?: string;
-  labelClass?: string;
-  labelStyle?: string;
-  labelAlignClass?: string;
-  valueClass?: string;
-  valueStyle?: string;
-  tabAlignClass?: string;
-}
-
-/**
- * form field
- *
- * @export
- * @interface FormField
- * @typedef {FormField}
- */
-export interface FormField {
-  name: string; // 'name'
-  renderType?: RENDER_TYPE | string;
-  customOptions: any;
-  label: string; // '아이디'
-  style: {
-    width: string | number;
-    labelHide: boolean;
-    labelWidth: string | number;
-    customClass: string;
-    valueWidth: string | number;
-    position: string;
-    tabAlign: string;
-  };
-  tooltip: string; // 툴팁 문구
-  disabled?: boolean; // disabled
-  description: string; // 설명
-  placeholder: string; // input , textarea 문구
-  orientation: ORIENTATION_TYPE; // children에 사용
-  required?: boolean; //true // 필수 여부
-  regexpType?: REGEXP_TYPE; // 정규식 타입
-  rule: {
-    // 규칙
-    minLength: number; // 3
-    maxLength: number; //100
-    minimum: number;
-    exclusiveMinimum: boolean;
-    maximum: number;
-    exclusiveMaximum: boolean;
-  };
-  different: {
-    // field 값이 다른지 비교
-    field: string;
-    message: string;
-  };
-  identical: {
-    // field 값이 같은지 비교
-    field: string;
-    message: string;
-  };
-  template: OptionCallback | string; // 필드 템플릿
-  defaultValue: string; // 기본값
-  listItem: ValuesInfo; // dropdown, radio, checkbox
-  children: FormField[]; // child field
-  validator?: OptionCallback; // custom validator
-  onChange: OptionCallback; //  입력값 변경시 체크 function
-  onClick: OptionCallback; // button onclick function
-  fileDownload: OptionCallback; // file download function
-  renderer: Render; // custom renderer
-  conditional: ConditionInfo; // 보이기 여부
-  gridOptions?: {
-    disableAddButton?: boolean; // renderer 그리드 타입 추가 버튼 유무
-    disableRemoveButton?: boolean; // renderer 그리드 타입 추가 버튼 유무
-    align?: TEXT_ALIGN_TYPE; // renderer 그리드 타입 추가 버튼 유무
-    height: string; // grid 높이값
-  };
-  $renderType: Render; // render Type
-  $instance: Render; // 실제 render
-  $orgin: FormField;
-  $xssName: string; // xss 변경명
-  $key: string; // 내부 key
-  $value: string; // 내부 사용 value
-  $parent: FormField;
-  $tabForm?: DaraForm; //tab 일경우 폼 정보
-  $validName: string; //
-}

package/src/types/FormOptions.d.ts

@@ -1,91 +0,0 @@
-import { FORM_MODE, TEXT_ALIGN_TYPE } from "src/constants";
-import { OptionCallback } from "./FormField";
-
-/**
- * form options
- *
- * @export
- * @interface FormOptions
- * @typedef {FormOptions}
- */
-export interface FormOptions {
-  /**
-   * style 옵션
-   *
-   * @example
-   * ```
-   * width: '600px',
-      position: 'left',
-      labelWidth: '3'
-      valueWidth: '9'
-   * ```
-   */
-  style: {
-    /**
-     * form width
-     * @example
-     * 600px, 100em
-     */
-    width: string;
-    /**
-     * field label width
-     * @example
-     * bootstrap width 참고 (1 ~ 12) 또는 '600px'
-     */
-    labelWidth: string | number;
-    /**
-     * field value width
-     * @example
-     * bootstrap width 참고 (1 ~ 12) 또는 '600px'
-     */
-    valueWidth: string | number;
-    /**
-     * field label position
-     * @example
-     * "top" | "left" | "left-left" | "left-right" | "right" | "right-left" | "right-right" | "bottom"
-     */
-    position: string;
-  };
-
-  /**
-   * form에 값을 renderer type별로 값을 구 할지 여부. tab 값을 구할때 영향이 있음
-   * @default false
-   * @example
-   * true or false
-   *
-   */
-  useTypeValue?: boolean;
-
-  /**
-   * form 자동 생성 여부
-   * @default true
-   * @example
-   * true or false
-   */
-  autoCreate?: boolean;
-  /**
-   * field 자동 포커스
-   * @default true
-   * @example
-   * true or false
-   */
-  autoFocus?: boolean; //  default true
-  notValidMessage?: string; //'This value is not valid'
-  onMounted?: OptionCallback;
-  mode?: FORM_MODE;
-  message?: {
-    required: string; // '{name} 필수 입력사항입니다.'
-    string: {
-      minLength: string; //'{size} 글자 이상 입력해야합니다.'
-      maxLength: string; //'{size} 글자 이상 입력할 수 없습니다.'
-    };
-    number: {
-      min: string; //'{size} 보다 커야 합니다'
-      max: string; //'{size} 보다 커야 합니다'
-    };
-    type: {
-      message: string; // '{type} 유효하지 않습니다.'
-    };
-  };
-  fields: any[];
-}

package/src/types/Message.d.ts

@@ -1,40 +0,0 @@
-export interface Message {
-  required: string;
-  fileButton: string;
-  selection: string;
-
-  // string
-  string: {
-    minLength: string;
-    maxLength: string;
-    between: string;
-  };
-
-  // number message
-  number: {
-    nan: string;
-    minimum: string;
-    exclusiveMinimum: string;
-    maximum: string;
-    exclusiveMaximum: string;
-    between: string;
-    betweenExclusiveMin: string;
-    betweenExclusiveMax: string;
-    betweenExclusiveMinMax: string;
-  };
-
-  // 정규식 메시지
-  regexp: {
-    mobile: string;
-    email: string;
-    url: string;
-    number: string;
-    alpha: string;
-    "alpha-num": string;
-    variable: string;
-    "number-char": string;
-    "upper-char": string;
-    "upper-char-special": string;
-    "upper-char-special-number": string;
-  };
-}

package/src/types/ValidResult.d.ts

@@ -1,9 +0,0 @@
-import { RULES } from '../constants';
-
-export interface ValidResult {
-    name: string
-    constraint: any[]
-    regexp?: string
-    validator?: any
-    message?: string
-}

package/src/util/Lanauage.ts

@@ -1,127 +0,0 @@
-import { Message } from "@t/Message";
-import { FormField } from "../types/FormField";
-import { ValidResult } from "@t/ValidResult";
-import { RULES } from "src/constants";
-
-let localeMessage: Message = {
-  required: "{label} 필수 입력사항입니다.",
-  fileButton: "파일찾기",
-  selection: "선택",
-  string: {
-    minLength: "{minLength} 글자 이상으로 입력하세요.",
-    maxLength: "{maxLength} 글자 이하로 입력하세요.",
-    between: "{minLength} ~ {maxLength} 사이의 글자를 입력하세요.",
-  },
-  number: {
-    nan: "숫자만 입력 가능 합니다.",
-    minimum: "{minimum} 값과 같거나 커야 합니다",
-    exclusiveMinimum: "{minimum} 보다 커야 합니다",
-    maximum: "{maximum} 값과 같거나 작아야 합니다",
-    exclusiveMaximum: "{maximum} 보다 작아야 합니다.",
-    between: "{minimum}~{maximum} 사이의 값을 입력하세요.",
-    betweenExclusiveMin: "{minimum} 보다 크고 {maximum} 보다 같거나 작아야 합니다",
-    betweenExclusiveMax: "{minimum} 보다 같거나 크고 {maximum} 보다 작아야 합니다",
-    betweenExclusiveMinMax: "{minimum} 보다 크고 {maximum} 보다 작아야 합니다",
-  },
-  regexp: {
-    mobile: "핸드폰 번호가 유효하지 않습니다.",
-    email: "이메일이 유효하지 않습니다.",
-    url: "URL이 유효하지 않습니다.",
-    alpha: "영문만 입력 가능 합니다.",
-    "alpha-num": "영문과 숫자만 입력 가능 합니다.",
-    number: "숫자만 입력 가능 합니다.",
-    variable: "값이 유효하지 않습니다.",
-    "number-char": "숫자, 문자 각각 하나 이상 포함 되어야 합니다.",
-    "upper-char": "대문자가 하나 이상 포함 되어야 합니다.",
-    "upper-char-special": "대문자,소문자,특수문자 각각 하나 이상 포함 되어야 합니다.",
-    "upper-char-special-number": "대문자,소문자,특수문자,숫자 각각 하나 이상 포함 되어야합니다.",
-  },
-};
-
-/**
- * validation 메시지 처리.
- *
- * @class Language
- * @typedef {Language}
- */
-class Language {
-  private lang: Message = localeMessage;
-
-  /**
-   * 다국어 메시지 등록
-   *
-   * @public
-   * @param {?Message} [lang] 둥록할 메시지
-   */
-  public set(lang?: Message) {
-    this.lang = Object.assign({}, localeMessage, lang);
-  }
-
-  /**
-   * 메시지 얻기
-   *
-   * @public
-   * @param {string} messageKey 메시지 키
-   * @returns {*}
-   */
-  public getMessage(messageKey: string): any {
-    return (this.lang as any)[messageKey];
-  }
-
-  /**
-   * ValidResult 값을 메시지로 변경.
-   *
-   * @public
-   * @param {FormField} field
-   * @param {ValidResult} validResult
-   * @returns {string[]}
-   */
-  public validMessage(field: FormField, validResult: ValidResult): string[] {
-    let messageFormat = "";
-
-    let messageFormats: string[] = [];
-
-    if (validResult.regexp) {
-      messageFormat = (this.lang.regexp as any)[validResult.regexp];
-      messageFormats.push(messageFormat);
-    }
-
-    (validResult.constraint ?? []).forEach((constraint) => {
-      if (constraint === RULES.REQUIRED) {
-        messageFormat = message(this.lang.required, field);
-        messageFormats.push(messageFormat);
-      }
-
-      if (field.renderType == "number" || field.renderType == "range") {
-        messageFormat = (this.lang.number as any)[constraint];
-        messageFormats.push(messageFormat);
-      } else {
-        messageFormat = (this.lang.string as any)[constraint];
-        messageFormats.push(messageFormat);
-      }
-    });
-
-    const reMessage: string[] = [];
-
-    const msgParam = Object.assign({}, { name: field.name, label: field.label }, field.rule);
-    messageFormats.forEach((msgFormat) => {
-      if (msgFormat) {
-        reMessage.push(message(msgFormat, msgParam));
-      }
-    });
-
-    if (validResult.validator) {
-      reMessage.push(validResult.validator.message);
-    }
-
-    return reMessage;
-  }
-}
-
-function message(msgFormat: string, msgParam: any): string {
-  return msgFormat.replace(/\{{1,1}([A-Za-z0-9_.]*)\}{1,1}/g, (match, key) => {
-    return typeof msgParam[key] !== "undefined" ? msgParam[key] : match;
-  });
-}
-
-export default new Language();

package/src/util/renderFactory.ts

@@ -1,26 +0,0 @@
-import { FormField } from "@t/FormField";
-
-import Render from "../renderer/Render";
-import { RENDER_TEMPLATE } from "../constants";
-import * as utils from "./utils";
-
-export const getRenderer = (field: FormField): Render => {
-  let render;
-  if (field.renderType) {
-    render = RENDER_TEMPLATE[field.renderType];
-  }
-
-  if (render && (render.isDataRender() === false || !utils.isUndefined(field.name))) {
-    return render;
-  }
-
-  if (utils.isUndefined(field.name)) {
-    if (field.children) {
-      return RENDER_TEMPLATE["group"];
-    } else {
-      return RENDER_TEMPLATE["hidden"];
-    }
-  }
-
-  return RENDER_TEMPLATE["text"];
-};

package/src/util/styleUtils.ts

@@ -1,85 +0,0 @@
-import { FieldStyle, FormField } from "@t/FormField";
-import * as utils from "./utils";
-import { FIELD_POSITION_STYLE, ALIGN } from "src/constants";
-import { FormOptions } from "@t/FormOptions";
-
-export default {
-  /**
-   * field style 처리
-   *
-   * @param formOptions FormOptions
-   * @param field FormField
-   * @param beforeField FormField
-   * @returns FieldStyle
-   */
-  fieldStyle(formOptions: FormOptions, field: FormField, beforeField?: FormField | null, isLabelHide?: boolean): FieldStyle {
-    const fieldStyle = {
-      rowStyleClass: field.orientation === "horizontal" ? "horizontal" : "vertical",
-      fieldClass: "",
-      fieldStyle: "",
-      labelClass: "",
-      labelStyle: "",
-      labelAlignClass: "",
-      valueClass: "",
-      valueStyle: "",
-      tabAlignClass: "",
-    };
-
-    const defaultLabelWidth = beforeField?.style?.labelWidth ?? formOptions.style.labelWidth ?? "3";
-    let defaultValueWidth = beforeField?.style?.valueWidth ?? formOptions.style.valueWidth ?? "9";
-    const position = beforeField?.style?.position ?? formOptions.style.position;
-
-    const width = field.style?.width;
-    const positionArr = FIELD_POSITION_STYLE[field.style?.position] ?? FIELD_POSITION_STYLE[position] ?? FIELD_POSITION_STYLE.top;
-
-    fieldStyle.fieldClass = `${positionArr[0]} ${field.style?.customClass || ""}`;
-    if (width) {
-      if (utils.isNumber(width)) {
-        fieldStyle.fieldClass += utils.isNumber(width) ? ` col-xs-${width}` : "";
-      } else {
-        fieldStyle.fieldStyle = utils.isNumber(width) ? "" : `width:${width};`;
-      }
-    }
-
-    fieldStyle.tabAlignClass = "tab-al-" + (["right", "center"].includes(field.style?.tabAlign) ? field.style.tabAlign : "left");
-
-    const labelWidth = field.style?.labelWidth || defaultLabelWidth;
-    fieldStyle.labelAlignClass = positionArr[1];
-
-    if (!isLabelHide && labelWidth && !["top", "bottom"].includes(positionArr[0])) {
-      if (utils.isNumber(labelWidth)) {
-        const labelWidthValue = +labelWidth;
-        defaultValueWidth = 12 - labelWidthValue;
-        fieldStyle.labelClass = `col-xs-${labelWidthValue}`;
-        fieldStyle.valueClass = fieldStyle.labelStyle ? "col-full" : `col-xs-${defaultValueWidth}`;
-      } else {
-        fieldStyle.labelStyle = `width:${labelWidth};`;
-      }
-    }
-
-    const valueWidth = field.style?.valueWidth || defaultValueWidth;
-    if (isLabelHide && !["left", "right"].includes(positionArr[0])) {
-      fieldStyle.valueClass = "col-full";
-    } else {
-      if (valueWidth && !["top", "bottom"].includes(positionArr[0])) {
-        if (utils.isNumber(valueWidth)) {
-          fieldStyle.valueClass = fieldStyle.labelStyle ? "col-full" : `col-xs-${valueWidth}`;
-        } else {
-          fieldStyle.valueStyle = `width:${valueWidth};`;
-        }
-      } else {
-        fieldStyle.valueClass = fieldStyle.labelStyle ? "col-full" : "";
-      }
-    }
-
-    fieldStyle.fieldClass = spaceReplace(fieldStyle.fieldClass);
-    fieldStyle.labelClass = spaceReplace(fieldStyle.labelClass);
-    fieldStyle.valueClass = spaceReplace(fieldStyle.valueClass);
-
-    return fieldStyle;
-  },
-};
-
-function spaceReplace(str: string): string {
-  return str.replace(/\s+/g, " ").trim();
-}