+validation

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "corello",
+  "name": "corellox",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -9,7 +9,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "corello": "^0.0.5",
     "vue": "^3.5.13"
   },
   "devDependencies": {

src/App.vue

@@ -1,15 +1,37 @@
 <script setup lang="ts">
-import { User } from './domain/user'
-const user = new User()
-//use from to deserialize the json..
-user.from({ name: 'Anas', car: { make: 'Benz' } })
-console.log(user)
-</script>
+// import { reactive } from 'vue'
+import { Human } from './domain/human'
+// import { User } from './domain/user'
+// const user = new User()
+// debugger
+// //use from to deserialize the json..
+// user.from({ name: 'Anas', car: { make: 'Benz' } })
+// console.log(user)
+const h = new Human()
+debugger
+h.age = -1
+h.from({ semsem: { name: 'AbcX' } })
+console.log('$$$$$$$$$ ', h)
+window.human = h
+const click = async () => {
+  console.log(await h.validate())
+}
 
+debugger
+</script>
 <template>
+  <button @click="click">validate</button>
   <h1>corello</h1>
   <p>Open the console</p>
-  <p>Name :{{ user.name }}</p>
+  <!--<p>Name :{{ user.name }}</p>
   <p>JSON{{ JSON.stringify(user) }}</p>
-  <p>is typeof User? :{{ user instanceof User }}</p>
+  <p>is typeof User? :{{ user instanceof User }}</p> -->
+  <hr />
+  Enter Age
+  <input type="number" v-model="h.age" />
+  <small>{{ h.v?.age?.result?.isOk }}</small>
+  <br />
+  <pre style="width: 100%">{{ h.v }}</pre>
+
+  <small>{{ h.v?.semsem?.result?.isOk }}</small>
 </template>

src/domain/human.ts

@@ -0,0 +1,125 @@
+import { Class, Dto, DtoBase } from 'corello'
+import { Validator, v, validatorFactory, type IValidated } from 'tamam'
+
+import { PropValidationResult } from 'tamam'
+import { User } from './user'
+import { reactive } from 'vue'
+
+//define a not validator..
+const not = (param: number) =>
+  validatorFactory({
+    not: new Validator(
+      (val: number) =>
+        new Promise((r, _x) => {
+          const isOk = val != param
+
+          setTimeout(() => {
+            console.log('DONE ', val)
+            r({ isOk, message: isOk ? 'NOT 10' : `validation.not.error` })
+          }, 1000)
+        })
+    )
+
+    // you can use as many validator functions here..
+  })
+const firstNot0 = validatorFactory({
+  not: new Validator(
+    (val: number[]) =>
+      new Promise((r, _x) => {
+        const isOk = val.length ? val[0] != 0 : true
+
+        setTimeout(() => {
+          r({ isOk, message: isOk ? 'First Element is not a zero yes!' : `validation.firstNot0.error` })
+        }, 1000)
+      })
+  )
+
+  // you can use as many validator functions here..
+})
+const not1 = (param: number) =>
+  validatorFactory({
+    not: new Validator((val: number) => {
+      const isOk = val != param
+      return { isOk, message: isOk ? '' : `validation.not.error` }
+    })
+
+    // you can use as many validator functions here..
+  })
+
+// following is a parameterless decorator..
+const positive = validatorFactory({
+  positive: new Validator(
+    (val: number) =>
+      new Promise(r => {
+        const isOk = val > 0
+        setTimeout(() => r({ isOk, message: isOk ? '' : `validation.positive.error` }), 2000)
+      }),
+    false
+  )
+  //...other validation functions if needed
+})
+const parentNameStartsWithAEndswithX = validatorFactory({
+  startsWithA: new Validator(
+    (val: User) =>
+      new Promise(r => {
+        const isOk = !!val?.name?.length && val?.name?.charAt(0) === 'A'
+        setTimeout(() => r({ isOk, message: isOk ? 'STARTS WITH A' : `validation.startsWithA.error` }), 1000)
+      }),
+    true
+  ),
+  startsEndsWithX: new Validator(
+    (val: User) =>
+      new Promise(r => {
+        const isOk = !!val?.name?.length && val?.name.charAt(val?.name?.length - 1) === 'X'
+        setTimeout(() => r({ isOk, message: isOk ? 'ENDS WITH X' : `validation.startsWithX.error` }), 1000)
+      }),
+    false
+  )
+  //...other validation functions if needed
+})
+class XYZ extends PropValidationResult {
+  get isOk() {
+    debugger
+    return false
+  }
+}
+
+@Dto
+@v({ vMapFactory: () => reactive({}), propValidationResultClass: XYZ })
+export class Human extends DtoBase<Human> implements IValidated<Human> {
+  // the lib will auto-add the following local v prop (not required) , but can enhance intellisense
+
+  // you can appply more than one validator here..
+  // age is valid if not n
+  @not(10) //with param
+  @positive //parameterless..
+  age!: number
+
+  @firstNot0 //parameterless..
+  arr: number[] = []
+
+  name: string = 'unnamed'
+  parent = new Parent()
+  @parentNameStartsWithAEndswithX
+  @Class(() => User)
+  semsem!: User
+  validate(props?: (keyof Human)[] | undefined): Promise<Record<keyof Human, { value: any; result: any }>> {
+    return this.validate(props)
+  }
+
+  get X() {
+    return 'Hello'
+  }
+  //...
+}
+
+@v()
+export class Parent {
+  // the lib will auto-add the following local v prop (not required) , but can enhance intellisense
+
+  // you can appply more than one validator here..
+  // age is valid if not n
+  @not(100) //with param
+  // @positive //parameterless..
+  height!: number
+}

src/style.css

@@ -22,14 +22,6 @@ a:hover {
   color: #535bf2;
 }
 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
 h1 {
   font-size: 3.2em;
   line-height: 1.1;
@@ -58,13 +50,6 @@ button:focus-visible {
   padding: 2em;
 }
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;