npm - @daracl/form - Versions diffs - 0.0.16 → 0.0.18 - Mend

@daracl/form 0.0.16 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (92) hide show

package/README.md +1 -1
package/dist/DaraForm.d.ts +51 -2
package/dist/FieldInfoMap.d.ts +8 -1
package/dist/FormTemplate.d.ts +2 -2
package/dist/constants.d.ts +5 -1
package/dist/daracl.form.css +688 -0
package/dist/daracl.form.min.css +10 -0
package/dist/daracl.form.min.umd.js +171 -0
package/dist/daracl.form.min.umd.js.map +1 -0
package/dist/daracl.form.umd.js +4477 -0
package/dist/daracl.form.umd.js.map +1 -0
package/dist/defaultOption.d.ts +8 -0
package/dist/event/renderEvents.d.ts +1 -1
package/dist/global.d.ts +6 -0
package/dist/index.cjs +1806 -519
package/dist/index.cjs.map +1 -7
package/dist/index.d.ts +7 -2
package/dist/index.html +193 -348
package/dist/index.js +4090 -3101
package/dist/index.js.map +1 -7
package/dist/index.min.cjs +171 -0
package/dist/index.min.cjs.map +1 -0
package/dist/index.min.js +2910 -0
package/dist/index.min.js.map +1 -0
package/dist/index.umd.d.ts +7 -0
package/dist/renderer/ButtonRender.d.ts +2 -2
package/dist/renderer/CheckboxRender.d.ts +2 -2
package/dist/renderer/CustomRender.d.ts +2 -2
package/dist/renderer/DateRender.d.ts +2 -2
package/dist/renderer/DropdownRender.d.ts +2 -2
package/dist/renderer/FileRender.d.ts +2 -2
package/dist/renderer/GridRender.d.ts +2 -2
package/dist/renderer/GroupRender.d.ts +2 -2
package/dist/renderer/HiddenRender.d.ts +2 -2
package/dist/renderer/NumberRender.d.ts +2 -2
package/dist/renderer/PasswordRender.d.ts +2 -2
package/dist/renderer/RadioRender.d.ts +2 -2
package/dist/renderer/RangeRender.d.ts +2 -2
package/dist/renderer/Render.d.ts +2 -2
package/dist/renderer/TabRender.d.ts +2 -2
package/dist/renderer/TextAreaRender.d.ts +2 -2
package/dist/renderer/TextRender.d.ts +2 -2
package/dist/types/FormField.d.ts +18 -13
package/dist/types/FormOptions.d.ts +1 -1
package/dist/types/style.d.ts +3 -0
package/dist/util/renderFactory.d.ts +1 -1
package/dist/util/styleUtils.d.ts +10 -12
package/dist/util/utils.d.ts +1 -1
package/package.json +129 -140
package/style/abstracts/_index.scss +2 -0
package/style/abstracts/_mixins.scss +22 -0
package/style/abstracts/_variables.scss +1 -0
package/style/base/_base.scss +59 -0
package/style/base/_index.scss +1 -0
package/style/components/_button.scss +16 -0
package/style/components/_field-container.scss +41 -0
package/style/components/_field-group.scss +16 -0
package/style/components/_file-list.scss +33 -0
package/style/components/_form-field.scss +47 -0
package/style/components/_form-group.scss +90 -0
package/style/components/_grid-field.scss +121 -0
package/style/components/_icon.scss +16 -0
package/style/components/_index.scss +11 -0
package/style/components/_label.scss +59 -0
package/style/components/_row.scss +88 -0
package/style/components/_tab.scss +70 -0
package/{dist/index.css → style/daracl.form.css} +19 -66
package/style/daracl.form.css.map +1 -0
package/style/daracl.form.min.css +2 -0
package/style/daracl.form.min.css.map +1 -0
package/style/daracl.form.scss +44 -691
package/style/themes/_common.scss +13 -0
package/style/themes/_dark.scss +20 -0
package/style/themes/_index.scss +14 -0
package/style/themes/_light.scss +20 -0
package/style/themes/_mixin.scss +6 -0
package/dist/commonVender.d.ts +0 -1
package/dist/daracl.form.js +0 -5720
package/dist/daracl.form.js.map +0 -1
package/dist/daracl.form.min.js +0 -7
package/dist/daracl.form.min.js.LICENSE.txt +0 -5
package/dist/daracl.form.min.js.map +0 -1
package/dist/daracl.vender.min.css +0 -5
package/dist/daracl.vender.min.js +0 -2
package/dist/daracl.vender.min.js.LICENSE.txt +0 -3
package/dist/index.css.map +0 -7
package/dist/indexVender.d.ts +0 -6
package/dist/main.css +0 -6
package/dist/main.css.map +0 -1
package/dist/types/DateTimePicker.d.ts +0 -5
package/src/index.ts +0 -5
/package/dist/util/{Lanauage.d.ts → Language.d.ts} +0 -0

package/dist/index.d.ts CHANGED Viewed

@@ -1,3 +1,8 @@
-import DaraForm from "./DaraForm";
+export { DaraForm } from "./DaraForm";
+export type { FormChangeEvent, FormChangeListener, Unsubscribe } from "./DaraForm";
+export type { FormField, ConditionInfo, ValuesInfo, FileInfo, FieldStyle, GridOptions, OptionCallback } from "@t/FormField";
+export type { FormOptions } from "@t/FormOptions";
+export type { Message } from "@t/Message";
+export type { ValidResult } from "@t/ValidResult";
 import "../style/daracl.form.scss";
-export = DaraForm;
+import "./global";

package/dist/index.html CHANGED Viewed

@@ -1,118 +1,43 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Dara Form</title>
-<head>
-  <meta charset="utf-8" />
-  <title>Dara Form</title>
-  <script src="/dist/daracl.vender.min.js"></script>
-  <link href="/dist/daracl.vender.min.css" rel="stylesheet">
-</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="formBuilder.isValidForm()">valid check</button>
-      <button type="button" onclick="formBuilder.resetForm()">Reset</button>
-      <button type="button" onclick="formBuilder.setFieldItems()">setFieldItems</button>
-    </div>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./daracl.form.min.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script type="text/javascript" src="./daracl.form.umd.js"></script>
+  </head>
+  <body onload="formObj.load()">
     <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 class="form-button">
+        <button type="button" onclick="formObj.addItem()">Add</button>
+        <button type="button" onclick="formObj.getValue()">getValue</button>
+        <button type="button" onclick="formBuilder.isValidForm()">valid check</button>
+        <button type="button" onclick="formBuilder.resetForm()">Reset</button>
+      </div>
     </div>
-  </div>
-  <div style="padding: 0px 20px">
-    <form id="loginForm" class="login-form"></form>
-    <form id="formArea" class="test-form aaa-test"></form>
-  </div>
-<script src="daracl.form.js"></script></body>
+    <div style="padding: 20px">
+      <form id="formArea"></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>
-  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: "horizontal",
     //mode: 'vertical',
+    //width: '600px',
     //autoFocus: false,
-    //useTypeValue: false,
-    style: {
-      //width: '600px',
-      position: 'left-left',
-      labelWidth: '3'
-    },
-    // form load 이후 호출.
-    onMounted: function () {
-      console.log(this)
-    },
+    labelWidth: "150px",
     message: {
       empty: "{name} 필수 입력사항입니다.",
       string: {
@@ -134,11 +59,22 @@
         renderType: "hidden",
         defaultValue: "asdf",
       },
+      {
+        name: "uid",
+        label: "아이디",
+        tooltip: "아이디를 넣어주세요.",
+        description: "설명설명설명",
+        placeholder: "아이디를 넣어주세요.",
+        required: true,
+        rule: {
+          minLength: 3,
+          maxLength: 100,
+        },
+        validator: (param) => {},
+      },
       {
         name: "uname",
-        label: "Text",
-        renderType: 'text',
-        template: '<div id="customElementID">111</div>',
+        label: "이름",
         required: true,
         rule: {
           minLength: 2,
@@ -147,186 +83,42 @@
         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: "cmpCredId111",
-        label: "Dropdown",
-        renderType: "dropdown",
-        tooltip: "credentials 넣어주세요.",
-        defaultValue: '222',
-        required: true,
-        listItem: {
-          labelField: "credName",
-          valueField: "credId",
-          list: [{ credId: "11", credName: "credNam11" }, { credId: "22", credName: "credName" }, { credId: "33", credName: "credName33" }],
-        },
-        description: "drop down 설명",
-        onChange: (aaa) => {
-          console.log(aaa)
-          if (aaa.newValue == '22') return false;
-          return true;
-        }
       },
       {
-        label: 'Password'
-        , 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: "birth",
-        label: "Date",
+        name: "birth2",
+        label: "생년월일2",
         required: true,
         renderType: "date",
-        customOptions: {
-          mode: 'date'
-        }
-      },
-      {
-        name: "sex",
-        label: "Radio",
-        required: true,
-        renderType: "radio",
-        listItem: {
-          list: [
-            { label: "남", value: "Y", selected: true },
-            { label: "여", value: "X" },
-          ],
+        rendererOptions: {
+          isEmbed: false,
+          mode: "datetime",
+          initialDate: new Date(),
         },
-      },
-      {
-        name: "picture",
-        label: "File",
-        required: true,
-        renderType: "file",
-        listItem: {
-          list: [
-          ],
+        onChange: (arg) => {
+          console.log(arg);
         },
       },
       {
-        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;
-          },
-        },
+        label: "주소",
+        viewMode: "vertical", // 'vertical , horizontal'
         children: [
           {
-            name: "address32",
-            label: "주소",
-            orientation: 'vertical',
-            style: {
-              labelHide: false,
-              position: 'left',
-              labelWidth: '120px',
-            },
+            name: "newAddress",
+            label: "신규주소여부",
+            hideLabel: true,
             required: true,
-            rule: {
-              minLength: 2,
-              maxLength: 100,
+            renderType: "checkbox",
+            values: [{ label: "option1", selected: true }],
+            onChange: (arg) => {
+              console.log(arg);
             },
-            conditional: {
-              show: false,
-              field: "newAddress",
-              eq: "N",
-              //custom?: OptionCallback
-            }
           },
           {
             name: "address",
-            label: "주소2",
+            label: "주소",
             hideLabel: true,
             required: true,
-            style: {
-              labelHide: false,
-            },
             rule: {
               minLength: 2,
               maxLength: 100,
@@ -340,44 +132,33 @@
           },
           {
             name: "address2",
-            label: "주소3",
-            style: {
-              //width: '200px',
-              labelHide: false,
-              position: 'left'
-            },
+            label: "주소1",
+            hideLabel: true,
             required: true,
             rule: {
               minLength: 2,
               maxLength: 100,
             },
             conditional: {
-              show: true,
+              show: false,
               field: "newAddress",
-              eq: "Y",
+              eq: true,
               //custom?: OptionCallback
             },
           },
           {
+            name: "hiddenMode1",
             renderType: "text",
             label: "주소 하위1",
-            //childLabelWidth: "",
-            orientation: "horizontal", // 'vertical , horizontal, horizontal-row'
-            style: {
-              labelWidth: "200px",
-              labelHide: false
-            },
-            conditional: {
-              show: true,
-              custom: function () {
-                return true;
-              },
-            },
+            childLabelWidth: "10%",
+            viewMode: "horizontal", // 'vertical , horizontal, horizontal-row'
+            hideLabel: true,
             children: [
               {
                 name: "address22222",
                 label: "주소1",
                 labelWidth: "150px",
+                renderType: "text",
               },
               {
                 name: "address222333322",
@@ -396,16 +177,141 @@
           },
         ],
       },
+      {
+        name: "uemail",
+        label: "이메일",
+        required: true,
+        regexpType: "email",
+        rule: {
+          maxLength: 100,
+        },
+        typeMessage: "The input is not a valid email address",
+        isValid: function (fieldInfo) {},
+        conditional: {
+          show: false,
+          field: "newAddress",
+          eq: true,
+          //custom?: OptionCallback
+        },
+      },
+      {
+        name: "age",
+        label: "나이",
+        renderType: "range",
+        required: true,
+        rule: {
+          minimum: 0,
+          maximum: 200,
+        },
+        defaultValue: 0,
+        typeMessage: "The input is not a valid email address",
+        isValid: function (fieldInfo) {},
+      },
+      {
+        name: "upw",
+        label: "비밀번호",
+        renderType: "password",
+        regexpType: "number-char",
+        rule: {
+          minLength: 8,
+        },
+        different: {
+          field: "uid",
+          message: "아이디와 달라야 합니다.",
+        },
+      },
+      {
+        name: "confirmUpw",
+        label: "비밀번호",
+        renderType: "password",
+        identical: {
+          field: "upw",
+          message: "비밀번호가 같아야합니다.",
+        },
+      },
+      {
+        name: "file",
+        label: "사진",
+        renderType: "file",
+        required: true,
+        values: [
+          { fileId: "test", fileName: "aaa.zip" },
+          { fileId: "test", fileName: "bbb.zip" },
+        ],
+      },
+      {
+        name: "dropdown",
+        label: "드랍다운",
+        renderType: "dropdown",
+        required: true,
+        values: [
+          { label: "All", value: "" },
+          { label: "option1", value: "1", selected: true },
+          { label: "option2", value: "2" },
+        ],
+      },
+      {
+        name: "useYn",
+        label: "사용여부",
+        required: true,
+        renderType: "radio",
+        values: [
+          { label: "Y", value: "Y", selected: true },
+          { label: "N", value: "N" },
+        ],
+      },
+      {
+        name: "check",
+        label: "checkbox",
+        required: true,
+        renderType: "checkbox",
+        values: [
+          { label: "option1", value: "1" },
+          { label: "option2", value: "2" },
+          { label: "option3", value: "3" },
+        ],
+      },
+      {
+        name: "birth",
+        label: "생년월일",
+        required: true,
+        renderType: "date",
+        rendererOptions: {
+          isEmbed: false,
+          mode: "datetime",
+          initialDate: new Date(),
+        },
+        onChange: (arg) => {
+          console.log(arg);
+        },
+      },
+      {
+        name: "textarea",
+        label: "텍스트 area",
+        placeholder: "신규주소 선택하",
+        renderType: "textarea",
+      },
+      {
+        name: "customField",
+        label: "custom Render",
+        renderType: "custom",
+        renderer: {
+          template: () => {
+            return "asdfawefwafwaef";
+          },
+          getValue: () => {
+            return "custom field value";
+          },
+        },
+      },
     ],
   };
   var rowIdx = 0;
   var formBuilder;
   var formObj = {
     load: () => {
-      // formBuilder = loginForm;
       formBuilder = Daracl.form.create(document.getElementById("formArea"), formInfo);
     },
     addItem: () => {
@@ -418,68 +324,7 @@
       });
     },
     getValue: () => {
-      let formValue = formBuilder.getValue();
-      console.log('getValue : ', formValue, JSON.stringify(formValue))
-      alert('파일은 콘솔 확인\n' + JSON.stringify(formValue));
-    },
-    getValuePromise: () => {
-      formBuilder
-        .getValue(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(
-        {
-          "hiddenMode": "asdf",
-          "이름222222": "이름222222",
-          "tab": {
-            "tab1": {
-              "tabPicture": [{ fileId: "test1", fileName: "aaa.zip" }],
-              "tabPictureRemoveIds": [],
-              "grid": [
-                { key: 'aaa', value: 'bbb', cre: 'credId' },
-                { key: 'key임', value: 'value임', cre: 'credId' }
-              ],
-              "uname222": "uname222vvvv",
-              "uname222333": "uname222333vvvv",
-              "child tab": {
-                "child-tab1": {
-                  "child-uname222": "child-uname222 uname222"
-                },
-                "child-uname2-tab2": {
-                  "child-uname333": "child-uname2-tab2 uname333"
-                }
-              }
-            },
-            "tab2": {
-              "uname333": "tab2 uname333 value"
-            }
-          }
-        }, false);
+      alert(JSON.stringify(formBuilder.getValue()));
     },
   };
-  formObj.load();
-  window.formBuilder = formBuilder;
-  window.formObj = formObj;
-</script>
+</script>