@mantine-vue/form 1.1.1

package/lib/types.d.ts

@@ -0,0 +1,98 @@
+import type { Ref } from 'vue';
+export type FormErrors = Record<string, any>;
+export type FormStatus = Record<string, boolean>;
+export type FormMode = 'controlled' | 'uncontrolled';
+export type OnSubmitPreventDefault = 'always' | 'never' | 'validation-failed';
+export interface ReorderPayload {
+    from: number;
+    to: number;
+}
+export type FormRule<Value, Values> = (value: Value, values: Values, path: string) => any;
+export type FormRulesRecord<Values> = {
+    [K in keyof Values]?: Values[K] extends ReadonlyArray<infer ListValue> ? Partial<Record<keyof ListValue, FormRule<any, Values> | FormRulesRecord<any>>> | FormRule<Values[K], Values> : Values[K] extends Record<string, any> ? FormRulesRecord<Values[K]> | FormRule<Values[K], Values> : FormRule<Values[K], Values>;
+} & Record<PropertyKey, any>;
+export interface UseFormInput<Values extends Record<string, any>, TransformedValues = Values> {
+    name?: string;
+    mode?: FormMode;
+    initialValues?: Values;
+    initialErrors?: FormErrors;
+    initialDirty?: FormStatus;
+    initialTouched?: FormStatus;
+    clearInputErrorOnChange?: boolean;
+    validateInputOnChange?: boolean | string[];
+    validateInputOnBlur?: boolean | string[];
+    validate?: FormRulesRecord<Values> | ((values: Values) => FormErrors);
+    transformValues?: (values: Values) => TransformedValues;
+    onValuesChange?: (values: Values, previous: Values) => void;
+    enhanceGetInputProps?: (payload: {
+        inputProps: Record<string, any>;
+        field: keyof Values | string;
+        options: GetInputPropsOptions;
+        form: UseFormReturnType<Values, TransformedValues>;
+    }) => Record<string, any> | undefined | void;
+    onSubmitPreventDefault?: OnSubmitPreventDefault;
+    touchTrigger?: 'focus' | 'change';
+    cascadeUpdates?: boolean;
+}
+export interface GetInputPropsOptions {
+    type?: 'input' | 'checkbox' | 'radio';
+    withError?: boolean;
+    withFocus?: boolean;
+    value?: any;
+}
+export interface UseFormReturnType<Values extends Record<string, any>, TransformedValues = Values> {
+    values: Ref<Values>;
+    initialized: Ref<boolean>;
+    errors: Ref<FormErrors>;
+    touched: Ref<FormStatus>;
+    dirty: Ref<FormStatus>;
+    submitting: Ref<boolean>;
+    watch: (path: keyof Values | string, subscriber: (input: {
+        previousValue: any;
+        value: any;
+        touched: boolean;
+        dirty: boolean;
+    }) => void) => () => void;
+    getValues: () => Values;
+    getInitialValues: () => Values;
+    setInitialValues: (values: Values) => void;
+    setValues: (values: Partial<Values> | ((values: Values) => Partial<Values>)) => void;
+    setFieldValue: (path: keyof Values | string, value: any, options?: {
+        forceUpdate?: boolean;
+    }) => void;
+    reset: () => void;
+    onReset: (event?: Event) => void;
+    resetField: (path: keyof Values | string) => void;
+    initialize: (values: Values) => void;
+    setSubmitting: (submitting: boolean | ((submitting: boolean) => boolean)) => void;
+    setErrors: (errors: FormErrors | ((errors: FormErrors) => FormErrors)) => void;
+    setFieldError: (path: keyof Values | string, error: any) => void;
+    clearFieldError: (path: keyof Values | string) => void;
+    clearErrors: () => void;
+    setTouched: (touched: FormStatus | ((touched: FormStatus) => FormStatus)) => void;
+    setDirty: (dirty: FormStatus | ((dirty: FormStatus) => FormStatus)) => void;
+    resetTouched: () => void;
+    resetDirty: (values?: Values) => void;
+    getTouched: () => FormStatus;
+    getDirty: () => FormStatus;
+    isTouched: (path?: keyof Values | string) => boolean;
+    isDirty: (path?: keyof Values | string) => boolean;
+    reorderListItem: (path: keyof Values | string, payload: ReorderPayload) => void;
+    insertListItem: (path: keyof Values | string, item: any, index?: number) => void;
+    removeListItem: (path: keyof Values | string, index: number) => void;
+    replaceListItem: (path: keyof Values | string, index: number, item: any) => void;
+    validate: () => {
+        hasErrors: boolean;
+        errors: FormErrors;
+    };
+    validateField: (path: keyof Values | string) => {
+        hasError: boolean;
+        error: any;
+    };
+    isValid: (path?: keyof Values | string) => boolean;
+    getInputProps: (path: keyof Values | string, options?: GetInputPropsOptions) => Record<string, any>;
+    onSubmit: (submit: (values: TransformedValues, event?: Event) => void | Promise<void>, validationFailure?: (errors: FormErrors, values: Values, event?: Event) => void) => (event?: Event) => void;
+    getTransformedValues: (values?: Values) => TransformedValues;
+    key: (path: keyof Values | string) => string;
+    getInputNode: <NodeType extends HTMLElement = HTMLElement>(path: keyof Values | string) => NodeType | null;
+}

package/lib/use-field.d.ts

@@ -0,0 +1,12 @@
+import type { UseFormReturnType } from './types';
+export interface UseFieldInput<Values extends Record<string, any>> {
+    form: UseFormReturnType<Values>;
+    path: keyof Values | string;
+}
+export declare function useField<Values extends Record<string, any>>({ form, path, }: UseFieldInput<Values>): {
+    value: import("vue").WritableComputedRef<any, any>;
+    error: import("vue").ComputedRef<any>;
+    touched: import("vue").ComputedRef<boolean>;
+    dirty: import("vue").ComputedRef<boolean>;
+    getInputProps: () => Record<string, any>;
+};

package/lib/use-form.d.ts

@@ -0,0 +1,2 @@
+import type { UseFormInput, UseFormReturnType } from './types';
+export declare function useForm<Values extends Record<string, any> = Record<string, any>, TransformedValues = Values>({ name, mode, initialValues, initialErrors, initialDirty, initialTouched, clearInputErrorOnChange, validateInputOnChange, validateInputOnBlur, validate: rules, transformValues, onValuesChange, enhanceGetInputProps, onSubmitPreventDefault, touchTrigger, cascadeUpdates, }?: UseFormInput<Values, TransformedValues>): UseFormReturnType<Values, TransformedValues>;

package/lib/validators.d.ts

@@ -0,0 +1,31 @@
+import type { FormErrors, FormRulesRecord } from './types';
+export declare function hasLength(payload: {
+    min?: number;
+    max?: number;
+}, error?: any): (value: string | unknown[]) => any;
+export declare function isNotEmpty(error?: any): (value: unknown) => any;
+export declare function matches(regexp: RegExp, error?: any): (value: string) => any;
+export declare function isEmail(error?: any): (value: string) => any;
+export declare function isInRange(payload: {
+    min?: number;
+    max?: number;
+}, error?: any): (value: number) => any;
+export declare function matchesField(path: string, error?: any): (value: unknown, values: Record<string, any>) => any;
+export declare function isNotEmptyHtml(error?: any): (value: string) => any;
+export declare function isJsonString(error?: any): (value: string) => any;
+export declare const formRootRule: unique symbol;
+export declare function validateValues<Values extends Record<string, any>>(rules: FormRulesRecord<Values> | ((values: Values) => FormErrors) | undefined, values: Values): {
+    hasErrors: boolean;
+    errors: FormErrors;
+};
+export declare function validateFieldValue<Values extends Record<string, any>>(path: PropertyKey, rules: FormRulesRecord<Values> | ((values: Values) => FormErrors) | undefined, values: Values): {
+    hasError: boolean;
+    error: any;
+};
+export declare function schemaResolver<T>(schema: {
+    safeParse: (value: T) => any;
+}): (values: T) => any;
+export declare const zodResolver: typeof schemaResolver;
+export declare const yupResolver: typeof schemaResolver;
+export declare const superstructResolver: typeof schemaResolver;
+export declare const joiResolver: typeof schemaResolver;

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@mantine-vue/form",
+  "version": "1.1.1",
+  "description": "Vue form management package equivalent to @mantine/form",
+  "license": "MIT",
+  "files": [
+    "cjs",
+    "esm",
+    "lib",
+    "styles.css",
+    "styles.layer.css",
+    "styles"
+  ],
+  "sideEffects": false,
+  "main": "./cjs/index.cjs",
+  "module": "./esm/index.mjs",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/index.d.mts",
+        "default": "./esm/index.mjs"
+      },
+      "require": {
+        "types": "./lib/index.d.ts",
+        "default": "./cjs/index.cjs"
+      }
+    }
+  },
+  "dependencies": {
+    "@mantine-vue/utils": "1.1.1"
+  },
+  "devDependencies": {
+    "@mantine-vue/utils": "workspace:*",
+    "vue": "^3.5.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  }
+}