@auronui/vue 1.0.9 → 1.0.11

package/dist/cjs/index.cjs

@@ -1454,6 +1454,7 @@ function useFormInject() {
 //#endregion
 //#region src/components/form/validation.ts
 var EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+var URL_REGEX = /^(https?:\/\/)?([\w-]+\.)+[\w-]+(\/[\w\-./?%&=]*)?$/i;
 function isEmpty(value) {
 	if (value === void 0 || value === null || value === "" || value === false) return true;
 	if (Array.isArray(value) && value.length === 0) return true;
@@ -1483,20 +1484,35 @@ function resolvePatternRule(rule) {
 	};
 	return rule;
 }
-async function runValidation(value, rules, validate) {
+function resolveStringRule(rule) {
+	if (typeof rule === "string") return {
+		value: rule,
+		message: void 0
+	};
+	return rule;
+}
+async function runValidation(value, rules, validate, context) {
 	if (!rules && !validate) return void 0;
 	if (rules?.required !== void 0) {
 		const { enabled, message } = resolveSimpleRule(rules.required);
 		if (enabled && isEmpty(value)) return message ?? "This field is required";
 	}
 	if (isEmpty(value)) {
-		if (validate) return await validate(value);
+		if (validate) return await validate(value, context);
 		return;
 	}
 	if (rules?.email !== void 0) {
 		const { enabled, message } = resolveSimpleRule(rules.email);
 		if (enabled && !EMAIL_REGEX.test(String(value))) return message ?? "Enter a valid email address";
 	}
+	if (rules?.url !== void 0) {
+		const { enabled, message } = resolveSimpleRule(rules.url);
+		if (enabled && !URL_REGEX.test(String(value))) return message ?? "Enter a valid URL";
+	}
+	if (rules?.integer !== void 0) {
+		const { enabled, message } = resolveSimpleRule(rules.integer);
+		if (enabled && !Number.isInteger(Number(value))) return message ?? "Must be a whole number";
+	}
 	if (rules?.pattern !== void 0) {
 		const { value: regex, message } = resolvePatternRule(rules.pattern);
 		if (!regex.test(String(value))) return message ?? "Invalid format";
@@ -1517,7 +1533,11 @@ async function runValidation(value, rules, validate) {
 		const { value: maxVal, message } = resolveNumericRule(rules.max);
 		if (Number(value) > maxVal) return message ?? `Must be at most ${maxVal}`;
 	}
-	if (validate) return await validate(value);
+	if (rules?.matches !== void 0) {
+		const { value: fieldName, message } = resolveStringRule(rules.matches);
+		if (value !== context?.values[fieldName]) return message ?? `Must match ${fieldName}`;
+	}
+	if (validate) return await validate(value, context);
 }
 //#endregion
 //#region src/components/form/Form.vue
@@ -1531,31 +1551,75 @@ var Form_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		},
 		class: { default: void 0 }
 	},
-	emits: ["submit", "invalid"],
-	setup(__props, { emit: __emit }) {
+	emits: [
+		"submit",
+		"invalid",
+		"reset"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
 		const errors = (0, vue.ref)({});
 		const isSubmitting = (0, vue.ref)(false);
+		const isSubmitted = (0, vue.ref)(false);
+		const submitCount = (0, vue.ref)(0);
 		const fields = /* @__PURE__ */ new Map();
+		const fieldCount = (0, vue.ref)(0);
 		function registerField(reg) {
 			fields.set(reg.name, reg);
+			fieldCount.value++;
 		}
 		function unregisterField(name) {
 			fields.delete(name);
+			fieldCount.value--;
 			const next = { ...errors.value };
 			delete next[name];
 			errors.value = next;
 		}
+		const isValid = (0, vue.computed)(() => {
+			fieldCount.value;
+			return Object.keys(errors.value).length === 0;
+		});
+		const isDirty = (0, vue.computed)(() => {
+			fieldCount.value;
+			for (const field of fields.values()) if (field.dirty.value) return true;
+			return false;
+		});
+		const isTouched = (0, vue.computed)(() => {
+			fieldCount.value;
+			for (const field of fields.values()) if (field.touched.value) return true;
+			return false;
+		});
+		function getAllValues() {
+			const values = {};
+			for (const [name, field] of fields.entries()) values[name] = field.getValue();
+			return values;
+		}
 		async function triggerFieldValidation(name) {
 			const field = fields.get(name);
 			if (!field) return;
-			const error = await runValidation(field.getValue(), field.rules, field.validate);
+			const error = await runValidation(field.getValue(), field.rules, field.validate, { values: getAllValues() });
 			const next = { ...errors.value };
 			if (error) next[name] = error;
 			else delete next[name];
 			errors.value = next;
 		}
+		async function trigger(name) {
+			if (name) {
+				await triggerFieldValidation(name);
+				return !errors.value[name];
+			}
+			const results = await Promise.all([...fields.entries()].map(async ([fieldName, field]) => {
+				return {
+					name: fieldName,
+					error: await runValidation(field.getValue(), field.rules, field.validate, { values: getAllValues() })
+				};
+			}));
+			const next = {};
+			for (const { name: fieldName, error } of results) if (error) next[fieldName] = error;
+			errors.value = next;
+			return Object.keys(next).length === 0;
+		}
 		function setErrors(newErrors) {
 			errors.value = {
 				...errors.value,
@@ -1563,12 +1627,43 @@ var Form_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			};
 			isSubmitting.value = false;
 		}
+		function setError(name, message) {
+			errors.value = {
+				...errors.value,
+				[name]: message
+			};
+		}
+		function clearErrors(name) {
+			if (name) {
+				const next = { ...errors.value };
+				delete next[name];
+				errors.value = next;
+			} else errors.value = {};
+		}
+		function getValues() {
+			return getAllValues();
+		}
+		function setValue(name, value) {
+			const field = fields.get(name);
+			if (field) field.setValue(value);
+		}
+		function reset() {
+			for (const field of fields.values()) field.reset();
+			errors.value = {};
+			isSubmitting.value = false;
+			isSubmitted.value = false;
+			submitCount.value = 0;
+			emit("reset");
+		}
 		async function handleSubmit() {
 			isSubmitting.value = true;
+			submitCount.value++;
+			const values = getAllValues();
+			const context = { values };
 			const results = await Promise.all([...fields.entries()].map(async ([name, field]) => {
 				return {
 					name,
-					error: await runValidation(field.getValue(), field.rules, field.validate)
+					error: await runValidation(field.getValue(), field.rules, field.validate, context)
 				};
 			}));
 			const nextErrors = {};
@@ -1576,12 +1671,13 @@ var Form_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			if (Object.keys(nextErrors).length > 0) {
 				errors.value = nextErrors;
 				isSubmitting.value = false;
+				isSubmitted.value = true;
 				emit("invalid", nextErrors);
 				return;
 			}
 			errors.value = {};
-			const values = {};
-			for (const [name, field] of fields.entries()) values[name] = field.getValue();
+			isSubmitted.value = true;
+			isSubmitting.value = false;
 			emit("submit", {
 				values,
 				setErrors
@@ -1590,12 +1686,39 @@ var Form_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		(0, vue.provide)(formContextKey, {
 			errors,
 			isSubmitting,
+			isSubmitted,
+			submitCount,
 			isDisabled: (0, vue.computed)(() => props.isDisabled),
+			isValid,
+			isDirty,
+			isTouched,
 			validationMode: (0, vue.computed)(() => props.validationMode),
 			registerField,
 			unregisterField,
 			triggerFieldValidation,
-			setErrors
+			setErrors,
+			setError,
+			clearErrors,
+			getValues,
+			setValue,
+			trigger,
+			reset
+		});
+		__expose({
+			errors,
+			isSubmitting,
+			isSubmitted,
+			submitCount,
+			isValid,
+			isDirty,
+			isTouched,
+			getValues,
+			setValue,
+			setErrors,
+			setError,
+			clearErrors,
+			trigger,
+			reset
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("form", {
@@ -1604,8 +1727,20 @@ var Form_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				onSubmit: (0, vue.withModifiers)(handleSubmit, ["prevent"])
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default", {
 				isSubmitting: isSubmitting.value,
+				isSubmitted: isSubmitted.value,
+				submitCount: submitCount.value,
 				isDisabled: props.isDisabled,
-				errors: errors.value
+				isValid: isValid.value,
+				isDirty: isDirty.value,
+				isTouched: isTouched.value,
+				errors: errors.value,
+				getValues,
+				setValue,
+				setErrors,
+				setError,
+				clearErrors,
+				trigger,
+				reset
 			})], 34);
 		};
 	}
@@ -1617,6 +1752,7 @@ var FormField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "FormField",
 	props: /* @__PURE__ */ (0, vue.mergeModels)({
 		name: {},
+		defaultValue: {},
 		rules: {},
 		validate: { type: Function },
 		validationMode: {}
@@ -1630,6 +1766,8 @@ var FormField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const modelValue = (0, vue.useModel)(__props, "modelValue");
 		const ctx = useFormInject();
 		const localError = (0, vue.ref)(void 0);
+		const touched = (0, vue.ref)(false);
+		const dirty = (0, vue.ref)(props.defaultValue !== void 0 && modelValue.value !== props.defaultValue);
 		const fieldError = (0, vue.computed)(() => ctx ? ctx.errors.value[props.name] : localError.value);
 		const hasBeenInvalid = (0, vue.ref)(false);
 		(0, vue.watch)(fieldError, (error) => {
@@ -1638,10 +1776,27 @@ var FormField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const isInvalid = (0, vue.computed)(() => !!fieldError.value);
 		const isDisabled = (0, vue.computed)(() => ctx?.isDisabled.value ?? false);
 		const validationMode = (0, vue.computed)(() => props.validationMode ?? ctx?.validationMode.value ?? "on-submit");
+		(0, vue.watch)(modelValue, (val) => {
+			dirty.value = val !== props.defaultValue;
+		});
+		function resetField() {
+			modelValue.value = props.defaultValue;
+			localError.value = void 0;
+			touched.value = false;
+			dirty.value = false;
+			hasBeenInvalid.value = false;
+		}
 		(0, vue.onMounted)(() => {
 			ctx?.registerField({
 				name: props.name,
 				getValue: () => modelValue.value,
+				getDefaultValue: () => props.defaultValue,
+				setValue: (val) => {
+					modelValue.value = val;
+				},
+				reset: resetField,
+				touched,
+				dirty,
 				rules: props.rules,
 				validate: props.validate
 			});
@@ -1650,7 +1805,8 @@ var FormField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			ctx?.unregisterField(props.name);
 		});
 		async function triggerValidation(val) {
-			const error = await runValidation(val, props.rules, props.validate);
+			const context = ctx ? { values: ctx.getValues() } : void 0;
+			const error = await runValidation(val, props.rules, props.validate, context);
 			if (ctx) {
 				const next = { ...ctx.errors.value };
 				if (error) next[props.name] = error;
@@ -1663,6 +1819,7 @@ var FormField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			if (validationMode.value === "on-change" || hasBeenInvalid.value) await triggerValidation(val);
 		}
 		async function handleBlur() {
+			touched.value = true;
 			if (validationMode.value === "on-blur") await triggerValidation(modelValue.value);
 		}
 		const fieldProps = (0, vue.computed)(() => ({
@@ -1675,7 +1832,13 @@ var FormField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			onBlur: handleBlur
 		}));
 		return (_ctx, _cache) => {
-			return (0, vue.renderSlot)(_ctx.$slots, "default", { fieldProps: fieldProps.value });
+			return (0, vue.renderSlot)(_ctx.$slots, "default", {
+				fieldProps: fieldProps.value,
+				touched: touched.value,
+				dirty: dirty.value,
+				error: fieldError.value,
+				isInvalid: isInvalid.value
+			});
 		};
 	}
 });
@@ -15246,6 +15409,15 @@ var SelectContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const props = __props;
 		const ctx = useSelectInject();
 		const rootContext = (0, reka_ui.injectSelectRootContext)();
+		const justOpened = (0, vue.ref)(false);
+		(0, vue.watch)(() => rootContext.open.value, (open) => {
+			if (open) {
+				justOpened.value = true;
+				setTimeout(() => {
+					justOpened.value = false;
+				}, 100);
+			}
+		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.SelectPortal), null, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(AnimatePresence_default), null, {
@@ -15255,7 +15427,7 @@ var SelectContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						"data-slot": "popover"
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(motion).div, {
-							class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.popover()),
+							class: (0, vue.normalizeClass)([(0, vue.unref)(ctx).slots.value.popover(), { "select__popover--opening": justOpened.value }]),
 							animate: (0, vue.unref)(rootContext).open.value ? {
 								opacity: 1,
 								scale: 1