@splitty-test/validation 0.1.0

package/.editorconfig

@@ -0,0 +1,8 @@
+[*.{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/.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

package/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 100
+}

package/.vscode/extensions.json

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

package/README.md

@@ -0,0 +1,39 @@
+# validation
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[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
+```

package/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/eslint.config.ts

@@ -0,0 +1,22 @@
+import { globalIgnores } from 'eslint/config'
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
+import pluginVue from 'eslint-plugin-vue'
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+
+// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
+// import { configureVueProject } from '@vue/eslint-config-typescript'
+// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
+// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
+
+export default defineConfigWithVueTs(
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{ts,mts,tsx,vue}'],
+  },
+
+  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
+
+  pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+  skipFormatting,
+)

package/lib/FieldValidation.vue

@@ -0,0 +1,96 @@
+<template>
+	<div ref="root" :class="{ invalid: error }">
+		<slot></slot>
+		<div v-if="!hideError" class="validation-error">{{ error }}</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, nextTick, type PropType } from 'vue';
+import { Validator } from './ValidatorClass';
+import { 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: {
+		error() {
+			if (this.validator.fields[this.name]?.errors.length) {
+				return this.validator.fields[this.name].errors[0];
+			}
+			return null;
+		},
+	},
+	mounted() {
+		// Add the field to the validator
+		if (!this.validator.fields[this.name]) {
+			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.value = true;
+							if (this.validator.fields[this.name].group) {
+								const group_name = this.validator.fields[this.name]?.group;
+								this.validator.groups[group_name].touched.value = true;
+							}
+							this.validator.fields[this.name].touched.value = 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/lib/FieldValidatorClass.ts

@@ -0,0 +1,96 @@
+import { isEqual, isPlainObject } from 'lodash-es';
+import { asyncForEach } from 'modern-async';
+import { reactive, ref, watch, type Ref } from 'vue';
+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: Ref<boolean, boolean>;
+	errors: string[];
+	group?: string;
+	rules: ValidationRule[];
+	touched: Ref<boolean, boolean>;
+	validated: Ref<boolean, boolean>;
+	validator: Validator;
+	value: Ref<any, any>;
+
+	constructor(config: FieldValidatorConfig, validator: Validator) {
+		this.controls = reactive([]);
+		this.dirty = ref(false);
+		this.errors = reactive([]);
+		this.rules = reactive(config.rules);
+		this.touched = ref(false);
+		this.validated = ref(false);
+		this.validator = validator;
+		this.value = ref(config.value);
+
+		if (config.group) {
+			this.group = config.group;
+		}
+
+		// Watch the value
+		watch(
+			this.value,
+			async (new_value, old_value) => {
+				if (!isEqual(new_value, old_value)) {
+					this.dirty.value = true;
+					this.validator.dirty.value = true;
+					if (this.group) {
+						this.validator.groups[this.group].dirty.value = true;
+					}
+					if (this.touched) {
+						await this.validate();
+					}
+				}
+			},
+			{
+				deep: isPlainObject(this.value),
+			},
+		);
+	}
+
+	get isValid() {
+		return this.errors.length === 0;
+	}
+
+	reset() {
+		this.touched.value = false;
+		this.dirty.value = false;
+		this.validated.value = 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/lib/ValidatorClass.ts

@@ -0,0 +1,106 @@
+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: Ref<boolean, boolean>;
+	fields: Record<string, FieldValidator>;
+	touched: Ref<boolean, boolean>;
+	validated: Ref<boolean, boolean>;
+}
+
+export class Validator {
+	dirty: Ref<boolean, boolean>;
+	errors: string[];
+	fields: Record<string, FieldValidator>;
+	groups: Record<string, ValidationGroup>;
+	touched: Ref<boolean, boolean>;
+	validated: Ref<boolean, boolean>;
+
+	constructor(config: ValidatorConfig = {}) {
+		this.dirty = ref(false);
+		this.errors = reactive([]);
+		this.fields = reactive({});
+		this.groups = reactive({});
+		this.touched = ref(false);
+		this.validated = ref(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.value = 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: ref(false),
+					fields: reactive({}),
+					touched: ref(false),
+					validated: ref(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.value = true;
+		} else {
+			await asyncForEach(Object.keys(this.fields), async (field) => {
+				await this.fields[field].validate();
+			});
+			this.validated.value = true;
+		}
+	}
+}

package/lib/index.ts

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

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@splitty-test/validation",
+  "version": "0.1.0",
+  "type": "module",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint": "eslint . --fix",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.21",
+    "modern-async": "^2.0.4",
+    "vue": "^3.5.18"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.2",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^22.16.5",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.6.0",
+    "@vue/tsconfig": "^0.7.0",
+    "eslint": "^9.31.0",
+    "eslint-plugin-vue": "~10.3.0",
+    "jiti": "^2.4.2",
+    "npm-run-all2": "^8.0.4",
+    "prettier": "3.6.2",
+    "typescript": "~5.8.0",
+    "vite": "^7.0.6",
+    "vite-plugin-vue-devtools": "^8.0.0",
+    "vue-tsc": "^3.0.4"
+  }
+}

package/tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "eslint.config.*"
+  ],
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

package/vite.config.ts

@@ -0,0 +1,30 @@
+import { fileURLToPath, URL } from 'node:url';
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueDevTools from 'vite-plugin-vue-devtools';
+import { resolve } from 'node:path';
+
+// https://vite.dev/config/
+export default defineConfig({
+	build: {
+		lib: {
+			entry: resolve(__dirname, './lib/index.ts'),
+			name: 'Validation',
+			fileName: 'index',
+		},
+		rollupOptions: {
+			external: ['vue'],
+			output: {
+				globals: {
+					vue: 'Vue',
+				},
+			},
+		},
+	},
+	plugins: [vue(), vueDevTools()],
+	resolve: {
+		alias: {
+			'@': fileURLToPath(new URL('./src', import.meta.url)),
+		},
+	},
+});