@splitty-test/validation 0.1.1 → 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Ronnie Garcia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,39 +1,9 @@
 # validation
 
-This template should help get you started developing with Vue 3 in Vite.
+This is a validation library for Vue 3 that is both simple but powerful. More documentation is coming soon.
 
-## Recommended IDE Setup
+## Installation
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
 ```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-npm run build
-```
-
-### Lint with [ESLint](https://eslint.org/)
-
-```sh
-npm run lint
+npm install @splitty-test/validation
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splitty-test/validation",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/.editorconfig

@@ -1,8 +0,0 @@
-[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
-charset = utf-8
-indent_size = 4
-indent_style = tab
-insert_final_newline = true
-trim_trailing_whitespace = true
-end_of_line = lf
-max_line_length = 100

package/.vscode/extensions.json

@@ -1,8 +0,0 @@
-{
-  "recommendations": [
-    "Vue.volar",
-    "dbaeumer.vscode-eslint",
-    "EditorConfig.EditorConfig",
-    "esbenp.prettier-vscode"
-  ]
-}

package/src/FieldValidation.vue

@@ -1,118 +0,0 @@
-<template>
-	<div ref="root" :class="{ invalid: error }">
-		<slot :invalid="!!error" :error_message="error"></slot>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, nextTick, type PropType } from 'vue';
-import { Validator } from './ValidatorClass';
-import { isEqual, isPlainObject, remove } from 'lodash-es';
-import type { ValidationRule } from './FieldValidatorClass';
-
-export default defineComponent({
-	name: 'FieldValidation',
-	props: {
-		name: {
-			type: String,
-			required: true,
-		},
-		hideError: Boolean,
-		modelValue: {
-			type: null,
-		},
-		modelModifiers: {
-			default: () => ({}),
-		},
-		rules: {
-			type: Array as PropType<ValidationRule[]>,
-			default() {
-				return [];
-			},
-		},
-		validator: {
-			type: Validator,
-			required: true,
-		},
-	},
-	data() {
-		return {
-			form_fields: [] as HTMLElement[],
-		};
-	},
-	computed: {
-		field() {
-			return this.validator.fields[this.name]!;
-		},
-		error() {
-			if (this.field && this.field.errors.length) {
-				return this.field.errors[0];
-			}
-			return null;
-		},
-	},
-	watch: {
-		modelValue: {
-			async handler(new_value: any, old_value: any) {
-				if (!isEqual(new_value, old_value)) {
-					if (this.field) {
-						this.field.value = new_value;
-						this.field.dirty = true;
-					}
-					this.validator.dirty = true;
-					if (this.field.group) {
-						this.validator.groups[this.field.group]!.dirty = true;
-					}
-					if (this.field.touched) {
-						await this.field.validate();
-					}
-				}
-			},
-			deep: true,
-		},
-	},
-	mounted() {
-		// Add the field to the validator
-		if (!this.field) {
-			let group;
-			if (Object.keys(this.modelModifiers).length === 1) {
-				group = Object.keys(this.modelModifiers)[0];
-			}
-			this.validator.addField(this.name, {
-				value: this.modelValue,
-				rules: this.rules,
-				group,
-			});
-		}
-
-		nextTick(() => {
-			// Add control elements to the validation methods
-			const root = this.$refs.root as HTMLElement;
-			const form_fields = root.querySelectorAll<HTMLElement>('input, select, textarea');
-			this.form_fields = Array.from(form_fields);
-			this.form_fields.forEach((form_field) => {
-				if (form_field.getAttribute('has-validation') !== 'true') {
-					this.validator.fields[this.name]?.controls.push(form_field);
-					form_field.addEventListener('blur', (event: FocusEvent) => {
-						if (!root.contains(event.relatedTarget as Node)) {
-							this.validator.touched = true;
-							if (this.validator.fields[this.name]!.group) {
-								const group_name = this.validator.fields[this.name]!.group;
-								this.validator.groups[group_name as string]!.touched = true;
-							}
-							this.validator.fields[this.name]!.touched = true;
-							this.validator.fields[this.name]!.validate();
-						}
-					});
-					form_field.setAttribute('has-validation', 'true');
-				}
-			});
-		});
-	},
-	beforeUnmount() {
-		this.form_fields.forEach((form_field) => {
-			remove(this.validator.fields[this.name]!.controls, form_field);
-		});
-	},
-});
-</script>

package/src/FieldValidatorClass.ts

@@ -1,74 +0,0 @@
-import { asyncForEach } from 'modern-async';
-import { type Validator } from './ValidatorClass';
-
-export interface FieldValidatorConfig {
-	value: any;
-	rules: ValidationRule[];
-	group?: string;
-}
-
-export type ValidationRule = (value: any, ...args: any) => Promise<string | null> | (string | null);
-
-export class FieldValidator {
-	controls: HTMLElement[];
-	dirty: boolean;
-	errors: string[];
-	group?: string;
-	rules: ValidationRule[];
-	touched: boolean;
-	validated: boolean;
-	validator: Validator;
-	value: any;
-
-	constructor(config: FieldValidatorConfig, validator: Validator) {
-		this.controls = [];
-		this.dirty = false;
-		this.errors = [];
-		this.rules = config.rules;
-		this.touched = false;
-		this.validated = false;
-		this.validator = validator;
-		this.value = config.value;
-
-		if (config.group) {
-			this.group = config.group;
-		}
-	}
-
-	get isValid() {
-		return this.errors.length === 0;
-	}
-
-	reset() {
-		this.touched = false;
-		this.dirty = false;
-		this.validated = false;
-		this.errors = [];
-	}
-
-	async validate() {
-		this.errors = [];
-
-		// Only validate if the controls are not disabled or hidden
-		let should_validate = false;
-		if (
-			this.controls.length > 0 &&
-			this.controls?.every((control_element) => {
-				return !control_element.getAttribute('disabled');
-			})
-		) {
-			should_validate = true;
-		}
-
-		if (should_validate) {
-			await asyncForEach(this.rules, async (rule: ValidationRule) => {
-				const error = await rule(this.value);
-				if (error !== null) {
-					this.errors.push(error);
-				}
-			});
-		}
-
-		return this.isValid;
-	}
-}

package/src/ValidatorClass.ts

@@ -1,106 +0,0 @@
-import { reactive, ref, type Ref } from 'vue';
-import { forIn } from 'lodash-es';
-import { FieldValidator, type FieldValidatorConfig } from './FieldValidatorClass';
-import { asyncForEach } from 'modern-async';
-
-export interface ValidatorConfig {
-	fields?: Record<string, FieldValidatorConfig>;
-}
-
-export interface ValidationGroup {
-	dirty: boolean;
-	fields: Record<string, FieldValidator>;
-	touched: boolean;
-	validated: boolean;
-}
-
-export class Validator {
-	dirty: boolean;
-	errors: string[];
-	fields: Record<string, FieldValidator>;
-	groups: Record<string, ValidationGroup>;
-	touched: boolean;
-	validated: boolean;
-
-	constructor(config: ValidatorConfig = {}) {
-		this.dirty = false;
-		this.errors = [];
-		this.fields = {};
-		this.groups = {};
-		this.touched = false;
-		this.validated = false;
-
-		if (config.fields) {
-			forIn(config.fields, (field_config, field_name) => {
-				this.addField(field_name, field_config);
-			});
-		}
-	}
-
-	isValid(group_name?: string) {
-		let field_names = Object.keys(this.fields);
-		if (group_name) {
-			field_names = Object.keys(this.groups[group_name]!.fields);
-		}
-
-		return field_names.every((field) => {
-			return this.fields[field]!.errors.length === 0;
-		});
-	}
-
-	reset(group_name?: string) {
-		this.validated = false;
-		this.errors = [];
-
-		if (group_name) {
-			forIn(this.groups[group_name]!.fields, (field) => {
-				field.reset();
-			});
-		} else {
-			forIn(this.fields, (field) => {
-				field.reset();
-			});
-		}
-	}
-
-	addField(field_name: string, field_config: FieldValidatorConfig) {
-		const new_field = new FieldValidator(field_config, this);
-		this.fields[field_name] = new_field;
-
-		if (field_config.group) {
-			if (!this.groups[field_config.group]) {
-				this.groups[field_config.group] = {
-					dirty: false,
-					fields: reactive({}),
-					touched: false,
-					validated: false,
-				};
-			}
-			this.groups[field_config.group]!.fields[field_name] = new_field;
-		}
-	}
-
-	removeField(field_name: string) {
-		if (this.fields[field_name]!.group) {
-			delete this.groups[this.fields[field_name]!.group]!.fields[field_name];
-		}
-		delete this.fields[field_name];
-	}
-
-	async validate(group_name?: string) {
-		if (group_name && this.groups[group_name]) {
-			const group = this.groups[group_name];
-
-			await asyncForEach(Object.keys(group.fields), async (field) => {
-				await group.fields[field]!.validate();
-			});
-
-			this.groups[group_name].validated = true;
-		} else {
-			await asyncForEach(Object.keys(this.fields), async (field) => {
-				await this.fields[field]!.validate();
-			});
-			this.validated = true;
-		}
-	}
-}

package/src/index.ts

@@ -1,6 +0,0 @@
-import { Validator } from './ValidatorClass';
-import { FieldValidator } from './FieldValidatorClass';
-import FieldValidation from './FieldValidation.vue';
-import * as rules from './rules';
-
-export { Validator, FieldValidator, FieldValidation, rules };

package/src/rules/index.ts

@@ -1,3 +0,0 @@
-import { match } from './match';
-
-export { match };

package/src/rules/match.ts

@@ -1,8 +0,0 @@
-export async function match(match_value: any, message: string) {
-	return function (value: any) {
-		if (!match_value || value === match_value) {
-			return null;
-		}
-		return message || 'The value does not match';
-	};
-}