@daracl/form 0.0.3 → 0.0.5

package/src/index-grid.html

@@ -0,0 +1,655 @@
+<!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();
+
+  const loginForm = Daracl.form.create(document.getElementById("loginForm"), {
+    message: "This value is not valid",
+    //mode: 'vertical',
+    //autoFocus: false,
+    style: {
+      //width: '600px',
+      position: 'left',
+      labelWidth: '3'
+
+    },
+    mode: 'write',
+    // 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<div>",
+        required: true,
+        label: "아이디",
+        tooltip: "아이디를 넣어주세요.",
+        placeholder: "아이디를 넣어주세요.",
+        renderType: "text",
+      }
+      , {
+        name: "password",
+        label: "패스워드",
+        description: "비밀번호는 대문자 소문자 포함입니다.",
+        placeholder: "패스워드를 입력하세요",
+        renderType: "password",
+      }
+      , {
+        name: "sex",
+        label: "남성/여성",
+        renderType: "checkbox",
+        listItem: {
+          list: [
+            { label: "", value: "Y", selected: true },
+          ],
+        }
+      }
+      , {
+        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" }],
+            }
+          },
+        ],
+
+      }
+    ]
+  });
+
+  var formInfo = {
+    message: "This value is not valid",
+    //mode: 'vertical',
+    //autoFocus: false,
+    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: "uid",
+        label: "아이디",
+        tooltip: "아이디를 넣어주세요.",
+        description: "설명설명설명",
+        placeholder: "아이디를 넣어주세요.",
+        renderType: "tab",
+        style: {
+          labelHide: false,
+          position: 'top-left'
+        },
+        children: [
+          {
+            label: 'tab1'
+            , description: 'tabl 설명'
+            , children: [
+              {
+                name: "uname222",
+                label: "tab-이름",
+                style: {
+                  customClass: 'custom-class',
+                  position: 'left',
+                  labelWidth: '120px',
+                  labelHide: false,
+                }
+                , rule: {
+                  minLength: 2,
+                  maxLength: 100,
+                },
+                onChange: (arg) => {
+                  console.log(arg);
+                },
+              }
+              , {
+                name: "uname222333",
+                label: "tab11-이름",
+                tooltip: "아이디를 넣어주세요.",
+                rule: {
+                  minLength: 2,
+                  maxLength: 100,
+                },
+                onChange: (arg) => {
+                  console.log(arg);
+                },
+              }
+
+              , {
+                label: "child tab",
+                renderType: "tab",
+                style: {
+                  //labelHide: true
+                  position: 'top-center'
+                }
+                , 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';
+          }
+          , valid(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("#formArea", formInfo);
+    },
+    addItem: () => {
+      rowIdx += 1;
+      formBuilder.addField({
+        name: `addItem${rowIdx}`,
+        label: `추가컬럼${rowIdx}`,
+        maxLength: 100,
+        required: true,
+      });
+    },
+    getValue: () => {
+      alert(JSON.stringify(loginForm.getValue()));
+    },
+    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;
+  window.loginForm = loginForm; 
+</script>