@inksightdev/ui 0.2.2 → 0.3.0

package/dist/composables/useFormField.d.ts

@@ -0,0 +1,28 @@
+import { FieldMeta } from 'vee-validate';
+import { Ref } from 'vue';
+export interface FormFieldProps {
+    modelValue?: string | number;
+    label?: string;
+    type?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    error?: string;
+    hint?: string;
+    autocomplete?: string;
+    name?: string;
+}
+export declare function useFormField(fieldValue: Ref<any>, fieldMeta: FieldMeta<any>, baseProps?: Partial<FormFieldProps>): import('vue').ComputedRef<{
+    modelValue: any;
+    label?: string | undefined;
+    type?: string | undefined;
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    readonly?: boolean | undefined;
+    required?: boolean | undefined;
+    error: string;
+    hint?: string | undefined;
+    autocomplete?: string | undefined;
+    name?: string | undefined;
+}>;

package/dist/composables/veeValidateExamples.d.ts

@@ -0,0 +1,109 @@
+/**
+ * Complete example of using @inksightdev/ui components with vee-validate
+ *
+ * This demonstrates:
+ * - Form validation with schemas (Zod)
+ * - Field-level error handling
+ * - Custom field components integration
+ * - Type-safe form handling
+ */
+export declare function useLoginForm(): {
+    values: {
+        email?: string | undefined;
+        password?: string | undefined;
+        rememberMe?: boolean | undefined;
+    };
+    isLoading: import('vue').Ref<boolean, boolean>;
+    emailField: import('vee-validate').FieldContext<unknown>;
+    passwordField: import('vee-validate').FieldContext<unknown>;
+    rememberMeField: import('vee-validate').FieldContext<unknown>;
+    onSubmit: (e?: Event) => Promise<Promise<void> | undefined>;
+    resetForm: (state?: Partial<import('vee-validate').FormState<{
+        email?: string | undefined;
+        password?: string | undefined;
+        rememberMe?: boolean | undefined;
+    }>> | undefined, opts?: Partial<import('vee-validate').ResetFormOpts>) => void;
+};
+export declare function useRegistrationForm(): {
+    values: {
+        firstName?: string | undefined;
+        lastName?: string | undefined;
+        email?: string | undefined;
+        phone?: string | undefined;
+        password?: string | undefined;
+        confirmPassword?: string | undefined;
+        dateOfBirth?: string | undefined;
+        country?: string | undefined;
+        interests?: string[] | undefined;
+        agreeToTerms?: boolean | undefined;
+    };
+    isSubmitting: import('vue').Ref<boolean, boolean>;
+    fields: {
+        firstName: import('vee-validate').FieldContext<unknown>;
+        lastName: import('vee-validate').FieldContext<unknown>;
+        email: import('vee-validate').FieldContext<unknown>;
+        phone: import('vee-validate').FieldContext<unknown>;
+        password: import('vee-validate').FieldContext<unknown>;
+        confirmPassword: import('vee-validate').FieldContext<unknown>;
+        dateOfBirth: import('vee-validate').FieldContext<unknown>;
+        country: import('vee-validate').FieldContext<unknown>;
+        interests: import('vee-validate').FieldContext<unknown>;
+        agreeToTerms: import('vee-validate').FieldContext<unknown>;
+    };
+    onSubmit: (e?: Event) => Promise<Promise<void> | undefined>;
+    resetForm: (state?: Partial<import('vee-validate').FormState<{
+        firstName?: string | undefined;
+        lastName?: string | undefined;
+        email?: string | undefined;
+        phone?: string | undefined;
+        password?: string | undefined;
+        confirmPassword?: string | undefined;
+        dateOfBirth?: string | undefined;
+        country?: string | undefined;
+        interests?: string[] | undefined;
+        agreeToTerms?: boolean | undefined;
+    }>> | undefined, opts?: Partial<import('vee-validate').ResetFormOpts>) => void;
+};
+export declare function useDynamicForm(): {
+    onSubmit: (e?: Event) => Promise<void | undefined>;
+};
+/**
+ * Usage patterns for different component types:
+ */
+export declare const USAGE_EXAMPLES: {
+    /**
+     * FormField component
+     * Most common use case - single field with label, error, hint
+     */
+    formField: string;
+    /**
+     * Input component alone
+     * For custom label or error UI
+     */
+    input: string;
+    /**
+     * Select component
+     * For dropdown/select validation
+     */
+    select: string;
+    /**
+     * Checkbox component
+     * For single or multiple selection
+     */
+    checkbox: string;
+    /**
+     * Radio group component
+     * For single-select options
+     */
+    radio: string;
+    /**
+     * Switch component
+     * For boolean toggle validation
+     */
+    switch: string;
+    /**
+     * DatePicker component
+     * For date validation
+     */
+    datePicker: string;
+};