@daracl/form 0.0.4 → 0.0.5

package/src/index-tab.html

@@ -0,0 +1,639 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>Dara Form</title>
+</head>
+
+<body>
+  <div class="header">
+    <div class="form-button">
+      <button type="button" onclick="formObj.addItem()">Add</button>
+      <button type="button" onclick="formObj.getValue()">getValue</button>
+      <button type="button" onclick="formObj.getValuePromise()">getValue(true)</button>
+      <button type="button" onclick="formObj.setValue()">setValue()</button>
+      <button type="button" onclick="formObj.isValidForm()">valid check</button>
+      <button type="button" onclick="formObj.resetForm()">Reset</button>
+      <button type="button" onclick="formObj.setFieldItems()">setFieldItems</button>
+    </div>
+
+    <div>
+      Theme : <label>Light<input type="radio" name="theme-toggle" value="light" checked="true"></label>
+      <label>Dark<input type="radio" name="theme-toggle" value="dark"></label>
+    </div>
+  </div>
+
+  <div style="padding: 0px 20px">
+    <form id="loginForm" class="login-form"></form>
+
+    <form id="formArea" class="test-form aaa-test"></form>
+
+  </div>
+</body>
+
+</html>
+<style>
+  .form-button {
+    text-align: center;
+  }
+
+  :root {
+    --bg: #ffffff;
+    --bg-color: #070d19;
+
+  }
+
+  body.dark {
+    --bg: #070d19;
+    --bg-color: #ffffff;
+
+  }
+
+  body {
+    background-color: var(--bg);
+  }
+
+  .header {
+    color: var(--bg-color);
+  }
+</style>
+<script type="module">
+
+  const THEME_KEY = "form-theme";
+  const theme = localStorage.getItem(THEME_KEY);
+
+  if (theme) setMainTheme(theme);
+
+  function setMainTheme(theme, persist = false) {
+    const classList = document.body.classList;
+
+    classList.remove("light", "dark");
+
+    classList.add(theme);
+
+    if (persist) {
+      localStorage.setItem(THEME_KEY, theme);
+    }
+  }
+
+  function load() {
+    // theme
+    const toggler = document.querySelectorAll('[name="theme-toggle"]');
+    const theme = localStorage.getItem(THEME_KEY);
+
+    if (toggler) {
+      if (theme === "dark") {
+        document.querySelector('[name="theme-toggle"][value="dark"]').checked = true;
+      }
+
+      toggler.forEach((el) => {
+        el.addEventListener("click", (e) => {
+          setMainTheme(el.value, true);
+        });
+      })
+    }
+  }
+  load();
+
+
+
+
+  var formInfo = {
+    message: "This value is not valid",
+    //mode: 'vertical',
+    //autoFocus: false,
+    //useTypeValue: true,
+    style: {
+      //width: '600px',
+      position: 'left-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: "hiddenMode",
+        renderType: "hidden",
+        defaultValue: "asdf",
+      }
+      ,
+      {
+        name: "이름222222",
+        label: "이름222222",
+        renderType: 'text',
+        template: '<div id="customElementID">111</div>',
+        required: true,
+        rule: {
+          minLength: 2,
+          maxLength: 100,
+        },
+        onChange: (arg) => {
+          console.log(arg);
+        },
+        renderer: {
+          mounted: () => {
+            console.log(document.getElementById('customElementID'))
+          }
+          , getValue() {
+            return '21';
+          }
+          , valid1(field, rowElement) {
+            const val = this.getValue();
+            return { name: field.name, message: 'custom type not valid' };
+          }
+        }
+      },
+      {
+        name: "tab",
+        label: "첫번째 탭",
+        tooltip: "탭을 선택후 정보를 입력해주세요.",
+        description: "탭 설명설명설명",
+        renderType: "tab",
+        style: {
+          labelHide: false,
+          position: 'top-left'
+        },
+        children: [
+          {
+            label: 'tab1'
+            , description: 'tabl 설명'
+            , children: [
+              {
+                name: "tabPicture",
+                label: "tab사진",
+                required: true,
+                renderType: "file",
+                listItem: {
+                  list: [
+                  ],
+                },
+              }
+              , {
+                name: "grid",
+                label: "grid",
+                renderType: "grid",
+                gridOptions: {
+                  disableAddButton: false,
+                  disableRemoveButton: false,
+                  height: '200px',
+                }
+                , children: [
+                  {
+                    name: "key",
+                    label: "key",
+                    renderType: "text",
+                    required: true,
+                    style: {
+                      width: '200px'
+                    },
+                    rule: {
+                      minLength: 2,
+                      maxLength: 100,
+                    },
+                  }
+                  , {
+                    name: "value",
+                    label: "value",
+                    renderType: "text",
+                  }
+                  , {
+                    name: "cre",
+                    label: "성별",
+                    required: true,
+                    renderType: "dropdown",
+                    listItem: {
+                      labelField: "credName",
+                      valueField: "credId",
+                      list: [{ label: "선택하세요." }, { credId: "credId", credName: "credName" }],
+                    }
+                  },
+                ],
+
+              },
+              {
+                name: "uname222",
+                label: "tab-이름",
+                style: {
+                  customClass: 'custom-class',
+                  position: 'left',
+                  labelWidth: '120px',
+                  labelHide: false,
+                }
+                , rule: {
+                  minLength: 2,
+                  maxLength: 100,
+                },
+
+              }
+              , {
+                name: "uname222333",
+                label: "tab11-이름",
+                tooltip: "아이디를 넣어주세요.",
+                rule: {
+                  minLength: 2,
+                  maxLength: 100,
+                },
+
+              }
+
+              , {
+                label: "child tab",
+                renderType: "tab",
+                style: {
+                  labelHide: true,
+                  //position: 'top-center',
+                  position: 'top-bottom',
+                }
+                , children: [
+                  {
+                    label: 'child-tab1'
+                    , description: 'tabl 설명'
+                    , children: [
+                      {
+                        name: "child-uname222",
+                        label: "tab-이름",
+                        style: {
+                          customClass: 'custom-class',
+                          position: 'left',
+                          labelWidth: '120px',
+                          labelHide: false,
+                        }
+                      }
+                    ]
+                  }
+                  , {
+                    label: 'child-uname2-tab2'
+                    , children: [
+                      {
+                        name: "child-uname333",
+                        label: "tab",
+
+                        rule: {
+                          minLength: 2,
+                          maxLength: 100,
+                        },
+                        onChange: (arg) => {
+                          console.log(arg);
+                        },
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+          , {
+            label: 'tab2'
+            , children: [
+              {
+                name: "uname333",
+                label: "tab-22222222222222222222222222222222",
+                rule: {
+                  minLength: 2,
+                  maxLength: 100,
+                },
+                onChange: (arg) => {
+                  console.log(arg);
+                },
+              }
+            ]
+          }
+        ]
+      },
+
+      /*
+          {
+            name: "uname",
+            label: "이름222222",
+            renderType: 'custom',
+            template: '<div id="customElementID">111</div>',
+            required: true,
+            rule: {
+              minLength: 2,
+              maxLength: 100,
+            },
+            onChange: (arg) => {
+              console.log(arg);
+            },
+            renderer: {
+              mounted: () => {
+                console.log(document.getElementById('customElementID'))
+              }
+              , getValue() {
+                return '21';
+              }
+              , valid1(field, rowElement) {
+                const val = this.getValue();
+                return { name: field.name, message: 'custom type not valid' };
+              }
+            }
+          },
+          {
+            label: '비밀번호'
+            , orientation: 'vertical'
+            , conditional: {
+              show: true,
+              custom: function () {
+     
+                return true;
+              }
+            }
+            , children: [{
+              name: 'upw'
+              , label: '비밀번호'
+              , style: {
+                labelHide: true
+              }
+              , renderType: 'password'
+              , regexpType: 'number-char'
+              , rule: {
+                minLength: 3
+              }
+              , different: {
+                field: 'uid',
+                message: '아이디와 달라야 합니다.'
+              }
+            }
+              , {
+              name: 'confirmUpw'
+              , label: '확인 비밀번호'
+              , style: {
+                labelHide: true
+              }
+              , renderType: 'password'
+              , identical: {
+                field: 'upw',
+                message: '비밀번호가 같아야합니다.'
+              }
+            }]
+          }
+         
+          , {
+            name: "age",
+            label: "생년월일",
+            required: true,
+            renderType: "date",
+            customOptions: {
+              mode: 'datetime'
+            }
+          },
+          {
+            name: "sex",
+            label: "성별",
+            required: true,
+            renderType: "radio",
+            listItem: {
+              list: [
+                { label: "남", value: "Y", selected: true },
+                { label: "여", value: "X" },
+              ],
+            },
+          },
+          {
+            name: "picture",
+            label: "사진",
+            required: true,
+            renderType: "file",
+            listItem: {
+              list: [
+              ],
+            },
+          },
+     
+          {
+            name: "cmpCredId",
+            label: "credentials",
+            renderType: "dropdown",
+            tooltip: "credentials 넣어주세요.",
+            required: true,
+            listItem: {
+              labelField: "credName",
+              valueField: "credId",
+              list: [{ label: "선택하세요." }, { credId: "credId", credName: "credName" }],
+            },
+            description: "awefawfeawefawef",
+          },
+          {
+            label: "checkbox",
+     
+            name: "checkbox11",
+            required: true,
+            renderType: "checkbox",
+            defaultValue: '',
+            listItem: {
+              orientation: "horizontal", // 'vertical , horizontal'
+              list: [
+                { label: "checkbox value", value: "Y", selected: true }
+                , { label: "checkbox value111", value: "Y1" }
+                , { label: "checkbox value222", value: "Y2", disabled: true }
+                , { label: "checkbox value333", value: "Y3" }
+              ],
+            },
+            onChange: (arg) => {
+              console.log(arg);
+            },
+          }
+          , {
+            label: "라벨주소",
+            name: 'newAddress',
+            renderType: 'radio',
+            //defaultValue: 'N',
+            listItem: {
+              orientation: "horizontal", // 'vertical , horizontal'
+              list: [
+                { label: "추가1", value: "Y", selected: true },
+                { label: "추가", value: "N" }
+              ],
+            }
+            , description: `<div><a href="asdf">111111111111111</a></div>`
+            , orientation: "horizontal" // 'vertical , horizontal'
+            , conditional: {
+              show: true,
+              custom: function () {
+                return true;
+              },
+            },
+            children: [
+     
+              {
+                name: "address32",
+                label: "주소",
+                orientation: 'vertical',
+                style: {
+                  labelHide: false,
+                  position: 'left',
+                  labelWidth: '120px',
+                },
+                required: true,
+                rule: {
+                  minLength: 2,
+                  maxLength: 100,
+                },
+                conditional: {
+                  show: false,
+                  field: "newAddress",
+                  eq: "N",
+                  //custom?: OptionCallback
+                }
+              },
+              {
+                name: "address",
+                label: "주소2",
+                hideLabel: true,
+                required: true,
+                style: {
+                  labelHide: false,
+                },
+                rule: {
+                  minLength: 2,
+                  maxLength: 100,
+                },
+                conditional: {
+                  show: true,
+                  custom: function () {
+                    return true;
+                  },
+                },
+              },
+              {
+                name: "address2",
+                label: "주소3",
+                style: {
+                  //width: '200px',
+                  labelHide: false,
+                  position: 'left'
+                },
+                required: true,
+                rule: {
+                  minLength: 2,
+                  maxLength: 100,
+                },
+                conditional: {
+                  show: true,
+                  field: "newAddress",
+                  eq: "Y",
+                  //custom?: OptionCallback
+                },
+              },
+              {
+                renderType: "text",
+                label: "주소 하위1",
+                //childLabelWidth: "",
+                orientation: "horizontal", // 'vertical , horizontal, horizontal-row'
+                style: {
+                  labelWidth: "200px",
+                  labelHide: false
+                },
+                conditional: {
+                  show: true,
+                  custom: function () {
+                    return true;
+                  },
+                },
+                children: [
+                  {
+                    name: "address22222",
+                    label: "주소1",
+                    labelWidth: "150px",
+                  },
+                  {
+                    name: "address222333322",
+                    label: "주소2",
+                    renderType: "text",
+                  },
+                ],
+              },
+              {
+                label: "버튼",
+                hideLabel: true,
+                renderType: "button",
+                onClick: (arg) => {
+                  console.log(arg);
+                },
+              },
+            ],
+          },
+          */
+    ],
+  };
+
+
+  var rowIdx = 0;
+  var formBuilder;
+  var formObj = {
+    load: () => {
+      // formBuilder = loginForm;
+      formBuilder = Daracl.form.create(document.getElementById("formArea"), formInfo);
+    },
+    addItem: () => {
+      rowIdx += 1;
+      formBuilder.addField({
+        name: `addItem${rowIdx}`,
+        label: `추가컬럼${rowIdx}`,
+        maxLength: 100,
+        required: true,
+      });
+    },
+    getValue: () => {
+      let formValue = formBuilder.getValue();
+      console.log('getValue : ', formValue)
+      alert('파일은 콘솔 확인\n' + JSON.stringify(formValue));
+    },
+    getValuePromise: () => {
+      formBuilder
+        .getFormDataValue(true)
+        .then((aa) => {
+          console.log(aa);
+
+          for (let [name, value] of aa.entries()) {
+            console.log(`${name} :  ${value}`);
+          }
+
+          alert("form data console 확인");
+        })
+        .catch((e) => {
+          alert(e.message);
+        });
+    },
+    setFieldItems: () => {
+      formBuilder.setFieldItems("picture", [
+        { fileId: "test1", fileName: "aaa.zip" },
+        { fileId: "test2", fileName: "bbb.zip" },
+      ]);
+      formBuilder.setValue({ sex: "X" }, false);
+    },
+
+    setValue: () => {
+      formBuilder.setValue({
+        grid: [
+          { key: 'aaa', value: 'bbb', cre: 'credId' },
+          { key: 'key임', value: 'value임', cre: 'credId' }
+        ]
+      }, false);
+    },
+  };
+
+  formObj.load();
+
+  window.formBuilder = formBuilder;
+  window.formObj = formObj;
+</script>