@daracl/form 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023-current The Darainfo Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,146 @@
+# DaraForm
+JavaScript form creation library
+
+[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/darainfo/daracl.form/blob/main/LICENSE)
+[![npm version](https://badge.fury.io/js/@daracl%2Fform.svg)](https://badge.fury.io/js/@daracl%2Fform)
+[![npm](https://img.shields.io/npm/d18m/%40daracl%2Fform)](https://github.com/darainfo/daracl.form/releases)
+[![minzipped size](https://img.shields.io/bundlephobia/minzip/@daracl%2Fform)](https://bundlephobia.com/package/@daracl%2Fform)
+
+
+
+## Browser Support
+
+![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png)  
+--- | --- | --- | --- | --- |  
+Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |  
+
+
+<p>
+<img src="https://github.com/darainfo/daracl.form/blob/main/demo.gif?raw=true"/>
+</p>
+
+
+1. Install
+
+```sh
+yarn install
+# OR
+npm install
+```
+
+2. Run
+
+```sh
+npm start
+```
+
+3. Open `http://localhost:8889` in your browser
+
+
+# 사용방법
+```
+const form = new DaraForm("#loginForm", {
+    message: "This value is not valid",
+     style: {
+      position: 'top-left',
+      labelWidth: '3'
+
+    },
+    // form load 이후 호출. 
+    onMounted: function () {
+      console.log(this)
+    },
+    message: {
+      empty: "{name} 필수 입력사항입니다.",
+      string: {
+        minLength: "{size} 글자 이상 입력해야합니다.",
+        maxLength: "{size} 글자 이상 입력할 수 없습니다.",
+      },
+      number: {
+        minimum: "{size} 보다 커야 합니다",
+        miximum: "{size} 보다 커야 합니다",
+      },
+      regexp: {
+        email: "이메일이 유효하지 않습니다.",
+        url: "URL이 유효하지 않습니다.",
+      },
+    },
+    fields: [
+      {
+        name: "uid",
+        label: "아이디",
+        tooltip: "아이디를 넣어주세요.",
+        placeholder: "아이디를 넣어주세요.",
+        renderType: "text",
+      }
+      , {
+        name: "password",
+        label: "패스워드",
+        description: "비밀번호는 대문자 소문자 포함입니다.",
+        placeholder: "패스워드를 입력하세요",
+        renderType: "password",
+      }
+    ]
+  });
+```
+  
+
+# Form 옵션
+| key | 설명 | 기본값 | 옵션값 |
+|-----|------|-----|-----|
+| style |  width: form 넓이<br> labelWidth : label 넓이 <br> valueWidth : value width<br> position : '"[label위치]"-[글자 정렬위치]' <br> -- ex) 'top-left','left-right' |  width: "100%" <br>  labelWidth: 3<br> valueWidth: 9<br> position: "left-right" | position : top,left,right - left,center,right |
+| autoFocus |  포커스 여부 |  true | true , false |
+| notValidMessage |   폼 유효하지 않을때 메시지 |   'This value is not valid'  | |
+| onMounted |  폼 로드후 이벤트 |  |  |
+| fields |  폼필드 [설명](#field-option) | | |
+| message |  폼 유효성 체크 메시지 [설명](#form-message) |  | 
+| useTypeValue | form에 값을 renderer type별로 값을 구 할지 여부. renderType tab 값을 구할때 영향이 있음 |  | 
+
+
+# Form message
+```javascript
+required:  '{name} 필수 입력사항입니다.'
+string: {
+  minLength: '{size} 글자 이상 입력해야합니다.'
+  maxLength: '{size} 글자 이상 입력할 수 없습니다.'
+};
+number: {
+  min: '{size} 보다 커야 합니다'
+  max: '{size} 보다 커야 합니다'
+};
+type: {
+  message: '{type} 유효하지 않습니다.'
+};
+```
+
+# Field Option
+| key | 설명 | 기본값 | 옵션값 |
+|-----|------|-----|-----|
+| name |  field name |   |  |
+| label |  label |   |  |
+| tooltip |  툴팁문구 |   |  |
+| disabled |  비활성화 여부 |   |  |
+| placeholder |  placeholder |   |  |
+| orientation |  차식 field 가 있을경우 방향 | vertical  | horizontal, vertical |
+| required |  필수 여부 |   |  |
+| regexpType |  정규식 타입 |   | email, url, alpha, alpha-num |
+| template | custom value 템플릿 |   |  |
+| listItem |  dropdown, radio, checkbox 옵션값 |   |  |
+| description |  설명 | labelField: label key <br> valueField: value key<br>  list: 옵션 리스트<br>
+  orientation: 방향  |  |
+| children | 자식 field 리스트 |   |  |
+| onChange | 입력값 변경시 호출되는 메소드 |   |  |
+| onClick | button 타입 클릭 이벤트 |   |  |
+| fileDownload | file 타입일경우 다운로드 메소드 |   |  |
+| renderer | custom renderer |   |  |
+| conditional | 보이기 여부 조건 | show: 보이기 여부 <br/>  field: field name <br> eq: 비교 값 <br> custom: custom 체크 메소드   |  |
+| renderType |  render type  | text  | number, text, file, textarea, dropdown, radio, checkbox, date(dara-datetimepicker모듈 사용), group, custom |
+| customOptions |  date 타입등의 추가 module에서 사용하는 추가 옵션 |   |  |
+| style |  width: field 넓이<br> labelHide : label 숨김여부 <br> labelWidth : label 넓이<br>  customClass : custom class <br> valueWidth : value width <br> tabAlign : render type이 tab일 경우 정렬 <br> position : '"[label위치]"-[글자 정렬위치]' <br> -- ex) 'top-left','left-right' |  width: "100%" <br>  labelWidth: 3<br> valueWidth: 9<br> position: "left-right" | position : top,left,right - left,center,right <br> tabAlign:left, center, right|
+| rule |  유효성 규칙 | minLength: 최소 길이 <br>  maxLength: 최대길이<br> minimum: 최소값 <br>    exclusiveMinimum: 최소값 포함 여부 <br> maximum: 최대값 <br>exclusiveMaximum: 최대값 포함여부 |  |
+| different | field 값이 다른지 비교 | field: field name <br> message: 메시지   |  |
+| identical | field 값이 같은지 비교 | field: field name <br> message: 메시지   |  |
+
+
+## License
+Darainfo is under [MIT License](./LICENSE).

package/dist/DaraForm.d.ts

@@ -0,0 +1,129 @@
+import { FormOptions } from "@t/FormOptions";
+import { FormField } from "@t/FormField";
+import { ValidResult } from "@t/ValidResult";
+import { Message } from "@t/Message";
+import FieldInfoMap from "src/FieldInfoMap";
+import FormTemplate from "./FormTemplate";
+import { FORM_MODE } from "./constants";
+/**
+ * DaraForm class
+ *
+ * @class DaraForm
+ * @typedef {DaraForm}
+ */
+export default class DaraForm {
+    static VERSION: string;
+    private readonly options;
+    private orginFormStyleClass;
+    private selector;
+    private formElement;
+    private fieldInfoMap;
+    private formValue;
+    formTemplate: FormTemplate;
+    constructor(formElement: Element, options: FormOptions, message?: Message);
+    static create(formElement: Element, options: FormOptions, message?: Message): DaraForm;
+    static setMessage(message: Message): void;
+    private createForm;
+    /**
+     * change mode
+     *
+     * @param mode form_mode default new
+     */
+    changeMode: (mode: FORM_MODE) => void;
+    /**
+     * 폼 데이터 reset
+     */
+    resetForm: () => void;
+    /**
+     * field 값 reset
+     * @param fieldName 필드명
+     */
+    resetField: (fieldName: string) => void;
+    /**
+     * 필드 element 얻기
+     *
+     * @param {string} fieldName
+     * @returns {*}
+     */
+    getFieldElement(fieldName: string): any;
+    getField(fieldName: string): FormField;
+    /**
+     * field 값 얻기
+     *
+     * @param fieldName  필드명
+     * @returns
+     */
+    getFieldValue: (fieldName: string) => any;
+    /**
+     * 폼 필드 값 얻기
+     * @param isValid 폼 유효성 검사 여부 default:false|undefined true일경우 검사.
+     * @returns
+     */
+    getValue: (isValid: boolean) => any;
+    getFormDataValue: (isValid: boolean) => any;
+    /**
+     * 폼 필드 value 셋팅
+     * @param values
+     */
+    setValue: (values: any, dataClear?: boolean | undefined) => void;
+    setFieldValue: (fieldName: string, value: any) => void;
+    private _setFieldValue;
+    setFieldItems: (fieldName: string, values: any) => void;
+    /**
+     * field 추가
+     *
+     * @param {FormField} field
+     */
+    addField: (field: FormField) => void;
+    /**
+     * field 제거
+     *
+     * @param {string} fieldName
+     */
+    removeField: (fieldName: string) => void;
+    /**
+     * 폼 유효성 검증 여부
+     *
+     * @returns {boolean}
+     */
+    isValidForm: () => boolean;
+    /**
+     * 유효성 검증 폼 검증여부 리턴
+     *
+     * @returns {any[]}
+     */
+    validForm: () => any[];
+    private validTabCheck;
+    isValidField: (fieldName: string) => boolean;
+    /**
+     * 설정 옵션 얻기
+     */
+    getOptions: () => FormOptions;
+    conditionCheck(): void;
+    setFieldDisabled(fieldName: string, flag: boolean): void;
+    /**
+     * 설명 추가
+     *
+     * @public
+     * @param {string} fieldName
+     * @param {string} desc
+     */
+    setFieldDescription(fieldName: string, desc: string): void;
+    destroy: () => void;
+    static validator: {
+        string: (value: string, field: FormField) => boolean | ValidResult;
+        number: (value: string, field: FormField) => boolean | ValidResult;
+        regexp: (value: string, field: FormField) => ValidResult;
+    };
+    static instance(ele: Element | String): DaraForm | undefined;
+    /**
+     * 모든 field 얻기
+     */
+    getFields: () => any[];
+    /**
+     * field setting
+     * @param fields
+     */
+    setFields: (fields: any[]) => void;
+    getFieldInfoMap(): FieldInfoMap;
+}

package/dist/FieldInfoMap.d.ts

@@ -0,0 +1,97 @@
+import { FormField } from "./types/FormField";
+import { ValidResult } from "./types/ValidResult";
+import DaraForm from "./DaraForm";
+interface NumberFieldMap {
+    [key: string]: FormField;
+}
+export default class FieldInfoMap {
+    private fieldIdx;
+    private allFieldInfo;
+    private keyNameMap;
+    private conditionFields;
+    private fieldPrefix;
+    private form;
+    constructor(selector: string, form: DaraForm);
+    /**
+     * add Field 정보
+     *
+     * @public
+     * @param {FormField} field 폼필드 정보
+     */
+    addField(field: FormField): void;
+    /**
+     * 필드명으로 필드 정부 구하기
+     *
+     * @public
+     * @param {string} fieldName 필드명
+     * @returns {FormField}
+     */
+    getFieldName(fieldName: string): FormField;
+    /**
+     * 필드 키로 정보 구하기
+     *
+     * @public
+     * @param {string} fieldKey
+     * @returns {FormField}
+     */
+    get(fieldKey: string): FormField;
+    /**
+     * 필드명 있는지 여부 체크.
+     *
+     * @public
+     * @param {string} fieldName 필드명
+     * @returns {boolean}
+     */
+    hasFieldName(fieldName: string): boolean;
+    /**
+     * 모든 필드 정보
+     *
+     * @public
+     * @returns {NumberFieldMap}
+     */
+    getAllFieldInfo(): NumberFieldMap;
+    /**
+     * 필드 정보 맵에서 지우기
+     *
+     * @public
+     * @param {string} fieldName
+     */
+    removeFieldInfo(fieldName: string): void;
+    /**
+     * 모든 필드값 구하기
+     *
+     * @public
+     * @param {boolean} validationCheck
+     * @returns {*}
+     */
+    getAllFieldValue(formValue: any, validationCheck: boolean): any;
+    getFormDataValue(formValue: any, validationCheck: boolean): Promise<unknown> | FormData;
+    /**
+     *
+     *
+     * @param field
+     * @returns
+     */
+    isConditionFieldCheck(field: FormField): boolean;
+    /**
+     * field 활성 비활성화 여부.
+     *
+     * @param field form field
+     * @returns
+     */
+    isConditionField(field: FormField): boolean;
+    /**
+     * 컬럼 로우 보이고 안보이기 체크.
+     *
+     * @public
+     */
+    conditionCheck(): void;
+    /**
+     * field validation check
+     *
+     * @param fieldInfo FormField
+     * @returns boolean true or ValidResult
+     */
+    getFieldValidation(fieldInfo: FormField, focusFlag: boolean | undefined): true | ValidResult;
+}
+export {};

package/dist/FormTemplate.d.ts

@@ -0,0 +1,60 @@
+import { FieldStyle, FormField } from "@t/FormField";
+import FieldInfoMap from "src/FieldInfoMap";
+import DaraForm from "./DaraForm";
+/**
+ * form template
+ *
+ * @class FormTemplate
+ * @typedef {FormTemplate}
+ */
+export default class FormTemplate {
+    private readonly options;
+    private readonly formElement;
+    private fieldInfoMap;
+    private daraform;
+    private addRowFields;
+    constructor(daraform: DaraForm, formElement: Element, fieldInfoMap: FieldInfoMap);
+    /**
+     * field row 추가.
+     *
+     * @param field
+     */
+    addRow(field: FormField): void;
+    /**
+     * 그룹 템플릿
+     *
+     * @param {FormField} field
+     * @returns {string} row template
+     */
+    addRowTemplate(field: FormField): void;
+    createField(field: FormField, element: Element): void;
+    /**
+     * child template
+     *
+     * @param {FormField} field
+     * @param {FieldStyle} parentFieldStyle
+     * @returns {*}
+     */
+    childTemplate(field: FormField, parentFieldStyle: FieldStyle): void;
+    /**
+     * label template
+     *
+     * @param {FormField} field form field
+     * @returns {string} template string
+     */
+    getLabelTemplate(field: FormField): string;
+    /**
+     * label 숨김 여부
+     *
+     * @param field formfield
+     * @returns
+     */
+    isLabelHide(field: FormField): boolean;
+    checkHiddenField(field: FormField): boolean;
+    /**
+     * add row file map
+     *
+     * @param {FormField} field
+     */
+    addRowFieldInfo(field: FormField): void;
+}

package/dist/constants.d.ts

@@ -0,0 +1,35 @@
+export type FORM_MODE = "new" | "modify" | "view";
+export declare const RULES: {
+    readonly NAN: "nan";
+    readonly MIN: "minimum";
+    readonly EXCLUSIVE_MIN: "exclusiveMinimum";
+    readonly MAX: "maximum";
+    readonly EXCLUSIVE_MAX: "exclusiveMaximum";
+    readonly MIN_LENGTH: "minLength";
+    readonly MAX_LENGTH: "maxLength";
+    readonly BETWEEN: "between";
+    readonly BETWEEN_EXCLUSIVE_MIN: "betweenExclusiveMin";
+    readonly BETWEEN_EXCLUSIVE_MAX: "betweenExclusiveMax";
+    readonly BETWEEN_EXCLUSIVE_MINMAX: "betweenExclusiveMinMax";
+    readonly REGEXP: "regexp";
+    readonly REQUIRED: "required";
+    readonly VALIDATOR: "validator";
+};
+export declare const FIELD_PREFIX = "dff";
+export declare const RENDER_TEMPLATE: any;
+export declare const ALIGN: {
+    readonly left: "left";
+    readonly center: "center";
+    readonly right: "right";
+};
+export type TEXT_ALIGN_TYPE = (typeof ALIGN)[keyof typeof ALIGN];
+export type RENDER_TYPE = "number" | "text" | "file" | "textarea" | "dropdown" | "radio" | "checkbox" | "date" | "datetime" | "dateyear" | "datemonth" | "datehour" | "group" | "custom";
+export type REGEXP_TYPE = "email" | "url" | "alpha" | "alpha-num";
+export type PASSWORD_TYPE = "number" | "upper" | "upper-special" | "upper-special-number";
+export type FIELD_POSITION = "top" | "left" | "left-left" | "left-right" | "right" | "right-left" | "right-right" | "bottom";
+export type ORIENTATION_TYPE = "horizontal" | "vertical";
+interface StringArrayMap {
+    [key: string]: string[];
+}
+export declare const FIELD_POSITION_STYLE: StringArrayMap;
+export {};