@daracl/form 0.0.11 → 0.0.13

package/src/index-tab.html

@@ -1,639 +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();
-
-
-
-
-  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>