First release

Author: AlisherARI

.gitignore

@@ -0,0 +1,17 @@
+.DS_Store
+node_modules
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,61 @@
+# **Validating ref**
+Accepts this rules
+```typescript
+'required' | 'email' | 'numeric' | 'date' | 'minLength' | 'maxLength';
+```
+Returns an object
+```typescript
+return reactive({
+  model,      // Value that you must assign to v-model
+  isValid,    // Bacome true if all rules becomes true
+  modelRules, // An object that have a rules state,
+              // For example, { required: true, minLength: false }
+});
+```
+
+Test it:  [Demo](https://alisherari.github.io/simple-vue3-validation/)
+
+## **Installation**
+```shell
+npm install -S light-vue3-validation
+```
+
+## **How to use it**
+
+### **First**
+Import `validateRef` function
+```javascript
+import { validateRef } from "light-vue3-validation"
+```
+
+### **Second**
+Assign this function to your variable and put two parameters
+* First is your model
+* Second is your validations
+```javascript
+setup() {
+  ...
+  const phone = validateRef('', ['required', 'numeric', { type: "maxLength", value: 12 }])
+  ...
+}
+```
+If your validating data is an object do something like this
+```javascript
+import { reactive } from "vue"
+
+const user = reactive({
+  phone: validateRef('', ['required', { type: 'minLength', value: 12 }]),
+  password: validateRef('', ['required', { type: 'minLength', value: 6 }]),
+  remember_me: ref(true),
+})
+```
+
+### **Third**
+Assign variable's `model` value to your `v-model`
+```html
+<input ... v-model="phone.model" ... />
+```
+
+## That's all
+
+Now you can control you variable and set messages you need by `modelRules` object parameters

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+};

dist/index.js

@@ -0,0 +1,62 @@
+"use strict";
+exports.__esModule = true;
+exports.validateRef = void 0;
+var vue_demi_1 = require("vue-demi");
+var rulesList = {
+    // Check if field is required (is not empty)
+    required: function (value) { return !!value; },
+    // Check if value is not less than minimal length
+    minLength: function (value, minLength) { return value.length >= minLength; },
+    // Check if value is not more than max length
+    maxLength: function (value, maxLength) { return value.length <= maxLength; },
+    // Test value for email by regular expression
+    email: function (value) { return /^\w+@[a-zA-Z_]+?\.?[a-z]+\.[a-zA-Z]{2,10}$/.test(value); },
+    // Check if value is a number
+    numeric: function (value) { return !isNaN(value); },
+    // Check if value is a Date
+    date: function (value) {
+        var valueDate = new Date(value);
+        var timeInMilliSecond = valueDate.valueOf();
+        var isInvalidDate = isNaN(timeInMilliSecond);
+        return !isInvalidDate;
+    }
+};
+// Validate your variable and make it reactive
+function validateRef(model, rules) {
+    // TODO: I can't type it. If you know how to do it please do it
+    var localRules = {};
+    // Get input rules from global rules list and copy them to local rules
+    rules.forEach(function (rule) {
+        if (typeof rule === 'string') {
+            localRules[rule] = rulesList[rule];
+        }
+        else {
+            localRules[rule.type] = {
+                type: rulesList[rule.type],
+                rule: rule.value
+            };
+        }
+    });
+    var value = (0, vue_demi_1.ref)(model);
+    var modelRules = (0, vue_demi_1.ref)({});
+    var isValid = (0, vue_demi_1.ref)(false);
+    (0, vue_demi_1.watch)(value, function () {
+        // Loop through local rules array and run validation functions
+        for (var rule in localRules) {
+            if (typeof localRules[rule] === 'object') {
+                modelRules.value[rule] = localRules[rule].type(value.value, localRules[rule].rule);
+            }
+            else {
+                modelRules.value[rule] = localRules[rule](value.value);
+            }
+        }
+        // Check if all rules are valid
+        isValid.value = Object.values(modelRules.value).every(function (rule) { return rule; });
+    }, { immediate: true });
+    return (0, vue_demi_1.reactive)({
+        model: value,
+        isValid: isValid,
+        modelRules: modelRules
+    });
+}
+exports.validateRef = validateRef;

dist/index.ts

@@ -0,0 +1,72 @@
+import { reactive, Ref, ref, UnwrapRef, watch } from "vue-demi";
+import { IRulesList, TInputRule, TModelRule } from "./types"
+
+const rulesList: IRulesList = {
+    // Check if field is required (is not empty)
+    required: value => !!value,
+
+    // Check if value is not less than minimal length
+    minLength: (value, minLength) => value.length >= minLength,
+
+    // Check if value is not more than max length
+    maxLength: (value, maxLength) => value.length <= maxLength,
+
+    // Test value for email by regular expression
+    email: value => /^\w+@[a-zA-Z_]+?\.?[a-z]+\.[a-zA-Z]{2,10}$/.test(value),
+
+    // Check if value is a number
+    numeric: value => !isNaN(value),
+
+    // Check if value is a Date
+    date: value => {
+        const valueDate = new Date(value);
+        const timeInMilliSecond = valueDate.valueOf();
+        const isInvalidDate = isNaN(timeInMilliSecond);
+        return !isInvalidDate;
+    },
+};
+
+// Validate your variable and make it reactive
+export function validateRef(model: string | number, rules: TInputRule[]): UnwrapRef<any> {
+    // TODO: I can't type it. If you know how to do it please do it
+    const localRules: Record<string, any> = {};
+
+    // Get input rules from global rules list and copy them to local rules
+    rules.forEach(rule => {
+        if (typeof rule === 'string') {
+            localRules[rule] = rulesList[rule];
+        } else {
+            localRules[rule.type] = {
+                type: rulesList[rule.type],
+                rule: rule.value,
+            };
+        }
+    });
+
+    const value: Ref = ref<typeof model>(model);
+    const modelRules: Ref = ref<Record<TModelRule, boolean> | {}>({});
+    const isValid: Ref = ref<boolean>(false);
+
+    watch(
+        value,
+        () => {
+            // Loop through local rules array and run validation functions
+            for (const rule in localRules) {
+                if (typeof localRules[rule] === 'object') {
+                    modelRules.value[rule] = localRules[rule].type(value.value, localRules[rule].rule);
+                } else {
+                    modelRules.value[rule] = localRules[rule](value.value);
+                }
+            }
+            // Check if all rules are valid
+            isValid.value = Object.values(modelRules.value).every(rule => rule);
+        },
+        { immediate: true }
+    );
+
+    return reactive({
+        model: value,
+        isValid,
+        modelRules,
+    });
+}

dist/types.d.ts

@@ -0,0 +1,25 @@
+export interface IRulesList {
+    required?: (value: string) => boolean;
+    minLength?: (value: string, minLength: number) => boolean;
+    maxLength?: (value: string, maxLength: number) => boolean;
+    email?: (value: string) => boolean;
+    numeric?: (value: number) => boolean;
+    date?: (value: string) => boolean;
+}
+
+// TODO: If you need new rules you can add it yourself or write me on Telegram @alisher_aripov11
+export type TInputRule =
+    | "required"
+    | "email"
+    | "numeric"
+    | "date"
+    | { type: "minLength" | "maxLength"; value: number };
+export type TModelRule =
+    | "required"
+    | "email"
+    | "numeric"
+    | "date"
+    | "minLength"
+    | "maxLength";
+
+export { validateRef } from "./index"