Yunomix

This is a set of validators that are designed for Vuetify and Lancet in @Decorator form.

Quick start

// Please make sure "reflect-metadata" is imported at your project entry.
import 'reflect-metadata'

import {
  Required, IsString, IsEnglish, IsNumber, IsHexColor,
  getValidatorRules
} from '@lancercomet/yunomix'

class User {
  @Required()
  @IsString(1, 10, {
    invalidType: 'Name length must within 1-10.'
  })
  @IsEnglish()
  name: string = ''

  @IsNumber('Age must be a number.')
  age: number = 0

  @IsString(5)
  addr: string = ''

  @IsHexColor()
  color: string = '#4fc315'
}

const rules = getValidatorRules(User)
const userInput = new User()

In Vuetify:

<v-textfield v-model="userInput.name" :rules="rules.name" />
<v-textfield v-model.number="userInput.age" :rules="rules.age" />
<v-textfield v-model="userInput.addr" :rules="rules.age" />
<v-textfield v-model="userInput.color" :rules="rules.color" />

In Lancet:

<lct-textfield v-model="userInput.name" :rules="rules.name" />
<lct-textfield v-model.number="userInput.age" :rules="rules.age" />
<lct-textfield v-model="userInput.addr" :rules="rules.age" />
<lct-textfield v-model="userInput.color" :rules="rules.color" />

Validator list

• Required
• IsString
• IsEmail
• IsChinese
• IsEnglish
• IsNumber
• NumRange
• IsHttpUrl
• IsHexColor
• CustomRule

Custom Rule

You can use CustomRule to create a customized validator:

// It accepts multiple validating functions.
@CustomRule(
  v => typeof v === 'string' || 'Value must be a string',
  v => v.includes('John') || 'Value must contain a "John".'
)

Example:

class User {
  // "v" is something that user gives.
  @CustomRule(v => v === 'Kayne' || 'You must be Kayne!')
  name: string = ''
}

const input = new User()
const rules = getValidatorRules(User)

<VTextfield v-model={input.name} rules={rules.user}>  // user.name can only be 'Kayne'.

CustomRule accepts one / several function(s) like (value: unknown) => true | string.

The returned value:

• true: Indicates that the value that user provides is valid.
• a string: Indicates that the value that user provides is invalid and this returned string will be used as the warning message.

Example

Please check the example folder.

Something you might to know

Yunomix depends on the very feature emitDecoratorMetadata which was introduced in TypeScript, so keep in mind:

• You have to install and import reflect-metadata manually.
• Not available in pure JavaScript enviroment. You have to use it with TypeScript.
• Not available for ESBuild because ESBuild doesn't emit decorator metadata.

License

Apache-2.0