dom-render - npm Package Compare versions

Comparing version 1.0.56 to 1.0.57

DomRenderProxy.js

@@ -19,2 +19,8 @@ import { RawSet } from './RawSet';
         return new Proxy(obj, {
+            get: function (target, p, receiver) {
+                if (p === '_DomRender_origin') {
+                    return obj;
+                }
+                return target[p];
+            },
             has: function (target, p) {
@@ -21,0 +27,0 @@ return p === '_DomRender_isFinal' || p in target;

package.json

 {
   "name": "dom-render",
-  "version": "1.0.56",
+  "version": "1.0.57",
   "main": "DomRender.js",
@@ -5,0 +5,0 @@ "license": "MIT",

RawSet.js

@@ -42,4 +42,4 @@ var __read = (this && this.__read) || function (o, n) {
 import { Range } from './iterators/Range';
-import { Validation } from './validations/Validation';
-import { Validations } from './validations/Validations';
+import { Validator } from './validators/Validator';
+import { ValidatorArray } from './validators/ValidatorArray';
 var RawSet = (function () {
@@ -187,8 +187,8 @@ function RawSet(uuid, point, fragment, data) {
                             var data = ScriptUtils.evalReturn("" + drAttr_1.drForm + (varpath ? '.' + varpath : ''), obj);
-                            if (data instanceof Validations) {
+                            if (data instanceof ValidatorArray) {
                                 varpath = drAttr_1.drForm + '.' + varpath;
                                 it.setAttribute(attrEventName, varpath + ".setValue($target, $target.value, $event);");
-                                data.addValue(it.value, it);
+                                data.addValidator(it.value, it);
                             }
-                            else if (data instanceof Validation) {
+                            else if (data instanceof Validator) {
                                 var target = drAttr_1.drForm + '.' + varpath + '.target';
@@ -195,0 +195,0 @@ var event_1 = drAttr_1.drForm + '.' + varpath + '.event';

README.MD

@@ -234,176 +234,69 @@ ![Single Page Application Framworks](assets/banner.png)
   addr: <input dr-form:event="input" name="addr">
-  <button type="submit"> aa</button>
+  <button type="submit">submit</button>
 </form>
 ```
 
-# validation
-```html
-  <div class="row mb-3">
-        <div class="col">
-            <span>아이디</span>
-            <input class="w-100" type="text" name="id" placeholder="아이디" dr-value-link="this.form.id.value" dr-event-blur="this.form.id.valid()" required/>
-            <span dr-on-init="this.form.id.msgElement" class="d-none"></span>
-        </div>
-    </div>
-    <div class="row mb-3">
-        <div class="col">
-            <span>비밀번호</span>
-            <input class="w-100" type="password" name="id" placeholder="숫자, 영문, 특수문자 조합 최소 8자~20자" dr-value-link="this.form.password.value" dr-event-blur="this.form.password.valid()" required/>
-            <span dr-on-init="this.form.password.msgElement" >password valid message section</span>
-            <input class="w-100" type="password" name="id" placeholder="비밀번호 재입력"  dr-value-link="this.form.confirmPassword" required/>
-            <span dr-class="{'d-block': this.form.password != this.form.confirmPassword, 'text-danger': this.form.password != this.form.confirmPassword}">2nd input password valid message section</span>
-        </div>
-    </div>
-    <div class="row mb-3">
-        <div class="col">
-            <span>이메일</span>
-            <input class="w-100" type="email" name="id" placeholder="이메일" dr-value-link="this.form.email" required/>
-            <span class="">2nd input password valid message section</span>
-        </div>
-    </div>
-</div>
-```
+# validator
 ```typescript
-class SignUp {
- public form = new class extends Validation {
-        id = new class extends Validation {
-            public msgElement!: HTMLElement;
-            valid(): boolean {
-                let valid = false;
-                if (this.length == 0) {
-                    this.msgElement.className = 'd-block text-danger';
-                    this.msgElement.textContent = '아이디를 입력해주세요.';
-                } else if (this.length < 3 || this.length > 20) {
-                    this.msgElement.className = 'd-block text-danger';
-                    this.msgElement.textContent = '아이디는 4글자 이상 20자 미만 이어야 합니다.';
-                } else {
-                    let isExist = false;
-                    if (isExist) {
-                        this.msgElement.className = 'd-block text-danger';
-                        this.msgElement.textContent = '이미 사용중인 아이디입니다. 다른 아이디를 이용해주세요.';
-                    } else {
-                        this.msgElement.className = 'd-block text-success';
-                        this.msgElement.textContent = '사용 가능한 아이디입니다.';
-                        valid = true;
-                    }
-                }
-                return valid;
-            }
-        }();
-        password = new class extends Validation {
-            public msgElement!: HTMLElement;
-            valid(): boolean {
-                let valid = false;
-                let regExp = /^.*(?=.)(?=.*[0-9])(?=.*[a-zA-Z]).*$/;
-                const ERROR_REQUIRE_PW = '비밀번호를 입력해주세요.';
-                const ERROR_PW_LENGTH = '비밀번호는 8글자~20글자로 이루어져야 합니다.';
-                const ERROR_PW_REGEXP = '비밀번호는 숫자, 영문, 특수문자 조합으로 이루어져야 합니다.';
-                const SUCCESS_AVAILABLE_USER_PW = '사용 가능한 비밀번호입니다.';
-                if (this.length == 0) {
-                    this.msgElement.className = 'd-block text-danger';
-                    this.msgElement.textContent = ERROR_REQUIRE_PW;
-                } else if (this.length < 8 || this.length > 20) {
-                    this.msgElement.className = 'd-block text-danger';
-                    this.msgElement.textContent = ERROR_PW_LENGTH;
-                } else {
-                    if (regExp.test(this.value)) {
-                        this.msgElement.className = 'd-block text-success';
-                        this.msgElement.textContent = SUCCESS_AVAILABLE_USER_PW;
-                        valid = true;
-                    } else {
-                        this.msgElement.className = 'd-block text-danger';
-                        this.msgElement.textContent = ERROR_PW_REGEXP;
-                    }
-                }
-                return valid;
-            }
-        }();
-        confirmPassword = new class extends Validation {
-            value = '';
-            valid(): boolean {
-                return true;
-            }
-        }();
-        email = new class extends Validation {
-            value = '';
-            valid(): boolean {
-                return true;
-            }
-        }();
-        valid() {
-            return this.childValid()
-        }
-    }();
-}
-```
-### dr-form (normal)
-```typescript
-form = new class extends Validation {
-    id = new class extends Validation {
-        valid(): boolean {
-            return false;
-        }
-    }()
+class PageValidator extends Validator { 
+    required = new RequiredValidator();
+    notEmpty = new NotEmptyValidator();
+    empty = new EmptyValidator();
+    regexp = new RegExpTestValidator(/[0-9]/);
+    mix = new MultipleValidator([new RequiredValidator(), new NotEmptyValidator()]);
 
-    valid(): boolean {
-        return false;
-    }
-}();
-console.log(form.id.value)
-```
-```html
-<form dr-form="this.form" dr-event-submit="this.submit(); $event.preventDefault();">
-    <input name="id"> <!-- id value -->
-    <input name=""> <!-- root value -->
-    <button type="submit"> submit</button>
-</form>
-```
-### dr-form (multiple validation)
-```typescript
-form = new class extends Validation {
-    id = new class extends Validation {
-        valid(): boolean {
-            return this.length > 0;
-        }
-    }();
+    all = new ValidValidatorArray((v, t, e) => {
+        return !((v ?? []).filter(it => !it.checked).length > 0);
+    });
 
-    all = new class extends Validations<string, HTMLInputElement> {
-        valid(): boolean {
-            const inChecked = this.values?.filter(it => it.target && !it.target.checked) ?? [];
-            return !(inChecked.length > 0)
-        }
-    }()
+    gender = new ValidValidatorArray((v, t, e) => {
+        return ((v ?? []).filter(it => it.checked).length > 0);
+    });
 
-    gender = new class extends Validations<string, HTMLInputElement> {
-        valid(): boolean {
-            const inChecked = this.values?.filter(it => it.target && it.target.checked) ?? [];
-            return inChecked.length > 0
-        }
-    }()
-
     valid(): boolean {
-        return this.valids();
+        return super.childValids();
     }
-}();
-
-submit() {
-  const form = (this.form as any)
-  console.log('submit222->', form.valid());
 }
+class User {
+  form = new PageValidator();
+  submit() {
+    console.log('submit valid->', this.form.valid());
+  }
+}
 ```
+
 ```html
 <form dr-form="this.form" dr-event-submit="this.submit(); $event.preventDefault();">
-    <h2>name</h2>
-    name: <input name="id">
+    <h2>validator</h2>
+    required: <input name="required"> <br>
+    notEmpty: <input name="notEmpty"> <br>
+    empty: <input name="empty"> <br>
+    regexp: /[0-9]/ <input name="regexp"> <br>
+    <h2>mix validator</h2>
+    required, notEmpty: <input name="mix"> <br>
     <h2>all check required</h2>
-    <input name="all" type="checkbox" value="a">a
-    <input name="all" type="checkbox" value="b">b
+    <input name="all" type="checkbox" value="a">a <br>
+    <input name="all" type="checkbox" value="b">b <br>
 
     <h2>gender chose one</h2>
-    <input name="gender" type="radio" value="male"> male
-    <input name="gender" type="radio" value="female"> Female
-    <br>
+    <input name="gender" type="radio" value="male"> Male <br>
+    <input name="gender" type="radio" value="female"> Female<br>
+
     <button type="submit">check valid</button>
 </form>
 ```
+validator
+- Validator (abstract)
+- ValidatorArray (abstract)
+- ValidValidator
+- ValidMultipleValidator
+- ValidValidatorArray
+- BlockValidator
+- CheckedValidator
+- EmptyValidator
+- MultipleValidator
+- NotEmptyValidator
+- RegExpTestValidator
+- RequiredValidator
+- SkipValidator
 # Detect Get, Set
@@ -410,0 +303,0 @@ OnBeforeReturnSet

No alert changes

Improved metrics

Total package byte prevSize

260053

increased by9.78%

Number of package files

91

increased by49.18%

Lines of code

4635

increased by14.81%

Worsened metrics

Number of lines in readme file

382

decreased by-21.88%

No dependency changes