@daracl/form 0.0.11 → 0.0.13

package/src/index-grid.html

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