dom-render 1.0.54 → 1.0.58

package/DomRenderProxy.d.ts

@@ -8,6 +8,7 @@ export declare class DomRenderProxy<T extends object> implements ProxyHandler<T>
     _domRender_proxy?: T;
     _targets: Set<Node>;
     constructor(_domRender_origin: T, target?: Node, config?: Config | undefined);
+    static unFinal<T = any>(obj: T): T;
     static final<T = any>(obj: T): T;
     static isFinal<T = any>(obj: T): boolean;
     run(objProxy: T): void;

package/DomRenderProxy.js

@@ -14,12 +14,13 @@ var DomRenderProxy = (function () {
             this._targets.add(target);
         }
     }
+    DomRenderProxy.unFinal = function (obj) {
+        delete obj._DomRender_isFinal;
+        return obj;
+    };
     DomRenderProxy.final = function (obj) {
-        return new Proxy(obj, {
-            has: function (target, p) {
-                return p === '_DomRender_isFinal' || p in target;
-            }
-        });
+        obj._DomRender_isFinal = true;
+        return obj;
     };
     DomRenderProxy.isFinal = function (obj) {
         return '_DomRender_isFinal' in obj;
@@ -129,7 +130,6 @@ var DomRenderProxy = (function () {
     };
     DomRenderProxy.prototype.set = function (target, p, value, receiver) {
         var _a, _b, _c, _d;
-        console.log('set--?', p, target, value);
         if (typeof p === 'string') {
             value = this.proxy(receiver, value, p);
         }

package/README.MD

@@ -231,180 +231,105 @@ class User {
   name: <input name="name">
   age: <input name="age">
   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()
-        }
-    }();
+class PageValidator extends FormValidator { 
+    required = new RequiredValidator();
+    notEmpty = new NotEmptyValidator();
+    empty = new EmptyValidator();
+    regexp = new RegExpTestValidator(/[0-9]/);
+    mix = new MultipleValidator([new RequiredValidator(), new NotEmptyValidator()]);
+
+    all = new ValidValidatorArray((v, t, e) => {
+        return !((v ?? []).filter(it => !it.checked).length > 0);
+    });
+
+    gender = new ValidValidatorArray((v, t, e) => {
+        return ((v ?? []).filter(it => it.checked).length > 0);
+    });
 }
-```
-### dr-form (normal)
-```typescript
-form = new class extends Validation {
-    id = new class extends Validation {
-        valid(): boolean {
-            return false;
-        }
-    }()
-
-    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 class extends Validations<string, HTMLInputElement> {
-        valid(): boolean {
-            const inChecked = this.values?.filter(it => it.target && !it.target.checked) ?? [];
-            return !(inChecked.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();
-    }
-}();
-
-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());
+  }
+  
+  changeData() {
+    this.form.required.value = 'new value';    
+  }
 }
 ```
+
 ```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)
+- AllCheckedValidatorArray
+- AllUnCheckedValidatorArray
+- CheckedValidator
+- CountEqualsCheckedValidatorArray
+- CountEqualsUnCheckedValidatorArray
+- CountGreaterThanCheckedValidatorArray
+- CountGreaterThanEqualsCheckedValidatorArray
+- CountGreaterThanEqualsUnCheckedValidatorArray
+- CountGreaterThanUnCheckedValidatorArray
+- CountLessThanCheckedValidatorArray
+- CountLessThanEqualsCheckedValidatorArray
+- CountLessThanEqualsUnCheckedValidatorArray
+- CountLessThanUnCheckedValidatorArray
+- CountUnCheckedValidatorArray
+- EmptyValidator
+- ExcludeCheckedValidatorArray
+- FormValidator
+- IncludeCheckedValidatorArray
+- MultipleValidator
+- NonPassValidator
+- NotEmptyValidator
+- NotRegExpTestValidator
+- PassValidator
+- RegExpTestValidator
+- RequiredValidator
+- UnCheckedValidator
+- ValidMultipleValidator
+- ValidValidator
+- ValidValidatorArray
+- ValueEqualsValidator
+- ValueNotEqualsValidator
+
+
+# Class
+## Range
+```typescript
+const range = new Range(100,55, 10);
+for (let data of new Range(100,55, 10)) {
+  console.log(data);
+}
+const rangeArray = new Range(100,55, 10).toArray();
+```
+
 # Detect Get, Set
 OnBeforeReturnSet
 ```typescript

package/RawSet.js

@@ -39,8 +39,8 @@ import { StringUtils } from './utils/string/StringUtils';
 import { ScriptUtils } from './utils/script/ScriptUtils';
 import { eventManager } from './events/EventManager';
 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 () {
     function RawSet(uuid, point, fragment, data) {
         if (data === void 0) { data = {}; }
@@ -176,26 +176,29 @@ var RawSet = (function () {
                 }
                 if (drAttr_1.drForm) {
                     RawSet.drFormOtherMoveAttr(element_2, 'name', 'temp-name');
+                    var data = ScriptUtils.evalReturn("" + drAttr_1.drForm, obj);
+                    if (data instanceof Validator) {
+                        data.setTarget(element_2);
+                    }
                     element_2.querySelectorAll('[name]').forEach(function (it) {
                         var _a;
                         var eventName = (_a = it.getAttribute('dr-form:event')) !== null && _a !== void 0 ? _a : 'change';
                         var attrEventName = eventManager.attrPrefix + 'event-' + eventName;
                         var varpath = it.getAttribute('name');
                         if (varpath != null) {
-                            var data = ScriptUtils.evalReturn("" + drAttr_1.drForm + (varpath ? '.' + varpath : ''), obj);
-                            if (data instanceof Validations) {
+                            var data_1 = ScriptUtils.evalReturn("" + drAttr_1.drForm + (varpath ? '.' + varpath : ''), obj);
+                            if (data_1 instanceof ValidatorArray) {
                                 varpath = drAttr_1.drForm + '.' + varpath;
-                                it.setAttribute(attrEventName, varpath + ".setValue($target, $target.value, $event);");
-                                data.addValue(it.value, it);
+                                it.setAttribute(attrEventName, varpath + ".setArrayValue($target, $target.value, $event);");
+                                data_1.addValidator(it.value, it);
                             }
-                            else if (data instanceof Validation) {
-                                var target = drAttr_1.drForm + '.' + varpath + '.target';
-                                var event_1 = drAttr_1.drForm + '.' + varpath + '.event';
+                            else if (data_1 instanceof Validator) {
+                                var fieldPath = drAttr_1.drForm + '.' + varpath;
                                 varpath += (varpath ? '.value' : 'value');
                                 varpath = drAttr_1.drForm + '.' + varpath;
-                                it.setAttribute(attrEventName, varpath + " = $target.value; " + target + "=$target; " + event_1 + "=$event;");
-                                data.target = it;
-                                data.value = it.value;
+                                it.setAttribute(attrEventName, varpath + " = $target.value; " + fieldPath + ".setTarget($target); " + fieldPath + ".setEvent($event);");
+                                data_1.setTarget(it);
+                                data_1.value = it.value;
                             }
                             else {
                                 varpath = drAttr_1.drForm + '.' + varpath;

package/dist/DomRenderProxy.d.ts

@@ -8,6 +8,7 @@ export declare class DomRenderProxy<T extends object> implements ProxyHandler<T>
     _domRender_proxy?: T;
     _targets: Set<Node>;
     constructor(_domRender_origin: T, target?: Node, config?: Config | undefined);
+    static unFinal<T = any>(obj: T): T;
     static final<T = any>(obj: T): T;
     static isFinal<T = any>(obj: T): boolean;
     run(objProxy: T): void;