@uniquedj95/vform 1.2.0

package/README.md

@@ -0,0 +1,140 @@
+# vForm
+
+## Overview
+vForm is a Vue.js component that dynamically generates forms based on a provided schema. It leverages Ionic components for a responsive and mobile-friendly design, supporting complex forms with conditional rendering and validation logic. It provides a robust and flexible form-building solution for Vue.js applications, allowing for a high degree of customization and control over the form behavior and appearance.
+
+## Features
+- **Dynamic Form Generation**: Create forms dynamically based on a schema definition.
+- **Conditional Field Rendering**: Fields can be shown or hidden based on other form values.
+- **Responsive Grid Layout**: Utilizes Ionic Grid for a responsive design that works across different screen sizes.
+- **Enhanced Date Input Field**: Custom date formatting and handling.
+- **Customizable Form Fields**: Support for a variety of input types with customizable properties.
+- **Built-in Validation**: Validate fields with custom or built-in validation functions.
+- **Customizable Button Text**: Easily change the text of action buttons.
+
+## Installation
+1. Using NPM package manager
+    ```sh
+    npm install @uniquedj95/vform
+    ```
+2. Using YARN package manager
+    ```sh
+    yarn add @uniquedj95/vform
+    ```
+
+## Usage
+1. Register `VForm` component in your Vue.js application:
+    ```typescript
+    // src/main.ts
+    import { createApp, Plugin } from 'vue';
+    import App from './App.vue';
+    import router from './router';
+    import { IonicVue } from '@ionic/vue';
+    import { VForm } from '@uniquedj95/vform';
+
+    /* Import CSS styles and other components here */
+
+    const app = createApp(App)
+        .use(IonicVue)
+        .use(VForm as Plugin)
+        .use(router);
+        
+    router.isReady().then(() => {
+        app.mount('#app');
+    });
+    ```
+
+2. Use the component in your template:
+    ```vue
+    <template>
+      <v-form :schema="formSchema" button-placement="end" @submit="onSubmit" />
+    </template>
+
+    <script setup lang="ts">
+    import { reactive } from "vue";
+    import { FormSchema, FormData, ComputedData } from "@uniquedj95/vform";
+
+    const formSchema = reactive<FormSchema>({
+        // Define your form schema here
+        fieldId: {
+            type: 'TextInput', // or other InputType
+            label: 'Field Label',
+            placeholder: 'Enter a value',
+            required: true,
+            // additional field configuration options
+        },
+        // Additional fields
+    });
+
+    function onSubmit(data: FormData, computedData: ComputedData) {
+        console.log(data, computedData);
+    }
+    </script>
+    ```
+
+## Schema Structure
+The schema object should define the structure of the form. Each key in the schema represents a form field with its configuration:
+
+### Field Configuration Options
+- **type** (`InputType`): Specifies the type of the input field. Supported types include:
+  - `TextInput`
+  - `DateInput`
+  - `NumberInput`
+  - `EmailInput`
+  - `PasswordInput`
+- **label** (`string`): The label displayed for the form field.
+- **placeholder** (`string`): Placeholder text for the input field.
+- **required** (`boolean`): Determines if the field is required for form submission.
+- **grid** (`GridSize`): Specifies the grid size for different screen sizes, allowing responsive design:
+  - `xs`, `sm`, `md`, `lg`, `xl`: Control the column size at various breakpoints.
+- **validation** (`FormValidator`): A custom validation function that returns an array of error messages if any.
+  - The function signature is `(value: FormValue, schema?: FormSchema) => Promise<Array<string> | null> | Array<string> | null`.
+- **condition** (`(data: FormData, computedData: ComputedData) => boolean`): A function to determine if the field should be rendered based on other form values.
+- **computedValue** (`ComputedValueHandler`): A function to compute a value based on the current field value and schema, allowing dynamic updates.
+  - The function signature is `(value: FormValue, schema: FormSchema) => Promise<any> | any`.
+- **options** (`FormOptions`): Used for select-type fields, providing options as an array or a function that returns a promise with the options.
+- **multiple** (`boolean`): Allows multiple selections for fields with options.
+- **min**/ **max** (`number | string`): Specifies minimum and maximum values for number inputs.
+- **minLength**/ **maxLength** (`number`): Sets minimum and maximum length for text inputs.
+- **disabled** (`boolean`): Disables the input field if set to `true`.
+- **hidden** (`boolean`): Hides the field completely if set to `true`.
+- **icon** (`string`): Icon to display within the input field.
+- **prefix**/ **suffix** (`string`): Text to display before or after the input value.
+- **error** (`string`): Custom error message for the field.
+- **pattern** (`string`): Regular expression pattern for input validation.
+- **allowUnknown**/ **allowCustom** (`boolean`): Allows unknown or custom values for the input.
+- **autoFocus** (`boolean`): Automatically focuses the input field on form load.
+- **fill** (`"solid" | "outline"`): Defines the fill style of the input field.
+- **labelPlacement** (`"stacked" | "start" | "end" | "fixed" | "floating"`): Determines the position of the label relative to the input field.
+- **onChange** (`(value: FormValue) => FormValue`): Function that is triggered when the field value changes, allowing for dynamic transformations.
+
+### Form Events
+- **submit**: Emitted when the form is submitted successfully after passing validation.
+  - Signature: `(formData: FormData, computedFormData: ComputedData) => void`
+- **clear**: Emitted when the form fields are cleared to their initial state.
+  - Signature: `() => void`
+- **cancel**: Emitted when the form submission is canceled, resetting fields.
+  - Signature: `() => void`
+
+### Form Props
+- **schema** (`FormSchema`): The schema object defining the form structure and field configurations.
+- **showLabels** (`boolean`): Determines if labels are displayed for each field. Default is `true`.
+- **showClearButton** (`boolean`): Controls the visibility of the clear/reset button. Default is `true`.
+- **showCancelButton** (`boolean`): Controls the visibility of the cancel button. Default is `true`.
+- **buttonPlacement** (`'start' | 'middle' | 'end'`): Specifies the alignment of action buttons within the form.
+- **submitButtonText** (`string`): Custom text for the submit button. Default is `"Submit"`.
+- **clearButtonText** (`string`): Custom text for the clear/reset button. Default is `"Reset"`.
+- **cancelButtonText** (`string`): Custom text for the cancel button. Default is `"Cancel"`.
+
+## Issue Reporting and Feedback
+If you encounter any issues or have suggestions for improvements, please feel free to report them on the [GitHub Issues page](https://github.com/uniquedj95/vform/issues). Your feedback is invaluable in helping us enhance this project.
+
+## Contributors
+I welcome contributions from the community! If you'd like to contribute, please follow these steps:
+1. Fork the repository.
+2. Create a new branch for your feature or bug fix.
+3. Implement your changes and commit them to your branch.
+4. Submit a pull request detailing your changes.
+
+Thank you to all the [contributors](https://github.com/uniquedj95/vform/graphs/contributors) who have helped make vForm better!
+

package/dist/components/inputs/BaseInput.vue.d.ts

@@ -0,0 +1,22 @@
+import { FormSchema, BaseFieldTypes } from 'types';
+import { PropType } from 'vue';
+
+declare const _default: import('vue').DefineComponent<{
+    modelValue: import('vue').PropType<any>;
+    schema: {
+        type: PropType<FormSchema>;
+    };
+    type: {
+        type: PropType<BaseFieldTypes>;
+    };
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: import('vue').PropType<any>;
+    schema: {
+        type: PropType<FormSchema>;
+    };
+    type: {
+        type: PropType<BaseFieldTypes>;
+    };
+}>>, {}, {}>;
+export default _default;
+//# sourceMappingURL=BaseInput.vue.d.ts.map

package/dist/components/inputs/BaseInput.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/BaseInput.vue"],"names":[],"mappings":"AA4BA;AAGE,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAO,MAAM,KAAK,CAAC;;gBAiD1B,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;;;;;;;gBAA3B,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;;;;;;;AAqGvC,wBASG"}

package/dist/components/inputs/DateInput.vue.d.ts

@@ -0,0 +1,16 @@
+import { FormSchema } from '../../types';
+import { PropType } from 'vue';
+
+declare const _default: import('vue').DefineComponent<{
+    modelValue: import('vue').PropType<any>;
+    schema: {
+        type: PropType<FormSchema>;
+    };
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: import('vue').PropType<any>;
+    schema: {
+        type: PropType<FormSchema>;
+    };
+}>>, {}, {}>;
+export default _default;
+//# sourceMappingURL=DateInput.vue.d.ts.map

package/dist/components/inputs/DateInput.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/DateInput.vue"],"names":[],"mappings":"AA6DA;AAKA,OAAO,KAAK,EAAa,UAAU,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EAAuB,QAAQ,EAAO,MAAM,KAAK,CAAC;;gBAgG7C,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;;;;gBAA3B,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;;;;AAgPvC,wBASG"}

package/dist/components/inputs/EmailInput.vue.d.ts

@@ -0,0 +1,16 @@
+import { FormSchema } from 'types';
+import { PropType } from 'vue';
+
+declare const _default: import('vue').DefineComponent<{
+    modelValue: import('vue').PropType<any>;
+    schema: {
+        type: PropType<FormSchema>;
+    };
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: import('vue').PropType<any>;
+    schema: {
+        type: PropType<FormSchema>;
+    };
+}>>, {}, {}>;
+export default _default;
+//# sourceMappingURL=EmailInput.vue.d.ts.map

package/dist/components/inputs/EmailInput.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/EmailInput.vue"],"names":[],"mappings":"AAOA;AAEA,OAAO,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;;gBAQnB,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;;;;gBAA3B,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;;;;AAsDvC,wBASG"}

package/dist/components/inputs/NumberInput.vue.d.ts

@@ -0,0 +1,16 @@
+import { FormSchema } from 'types';
+import { PropType } from 'vue';
+
+declare const _default: import('vue').DefineComponent<{
+    modelValue: import('vue').PropType<any>;
+    schema: {
+        type: PropType<FormSchema>;
+    };
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: import('vue').PropType<any>;
+    schema: {
+        type: PropType<FormSchema>;
+    };
+}>>, {}, {}>;
+export default _default;
+//# sourceMappingURL=NumberInput.vue.d.ts.map

package/dist/components/inputs/NumberInput.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/NumberInput.vue"],"names":[],"mappings":"AAOA;AAEA,OAAO,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;;gBAQnB,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;;;;gBAA3B,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;;;;AAsDvC,wBASG"}

package/dist/components/inputs/PasswordInput.vue.d.ts

@@ -0,0 +1,16 @@
+import { FormSchema } from 'types';
+import { PropType } from 'vue';
+
+declare const _default: import('vue').DefineComponent<{
+    modelValue: import('vue').PropType<any>;
+    schema: {
+        type: PropType<FormSchema>;
+    };
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: import('vue').PropType<any>;
+    schema: {
+        type: PropType<FormSchema>;
+    };
+}>>, {}, {}>;
+export default _default;
+//# sourceMappingURL=PasswordInput.vue.d.ts.map

package/dist/components/inputs/PasswordInput.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/PasswordInput.vue"],"names":[],"mappings":"AAOA;AAEA,OAAO,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;;gBAQnB,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;;;;gBAA3B,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;;;;AAsDvC,wBASG"}

package/dist/components/inputs/TextInput.vue.d.ts

@@ -0,0 +1,16 @@
+import { FormSchema } from 'types';
+import { PropType } from 'vue';
+
+declare const _default: import('vue').DefineComponent<{
+    modelValue: import('vue').PropType<any>;
+    schema: {
+        type: PropType<FormSchema>;
+    };
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: import('vue').PropType<any>;
+    schema: {
+        type: PropType<FormSchema>;
+    };
+}>>, {}, {}>;
+export default _default;
+//# sourceMappingURL=TextInput.vue.d.ts.map

package/dist/components/inputs/TextInput.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/TextInput.vue"],"names":[],"mappings":"AAOA;AAEA,OAAO,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;;gBAQnB,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;;;;gBAA3B,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;;;;AAsDvC,wBASG"}

package/dist/components/vForm.vue.d.ts

@@ -0,0 +1,64 @@
+import { FormData, ComputedData, FormSchema } from '../types';
+
+interface FormProps {
+    schema: FormSchema;
+    showLabels?: boolean;
+    showClearButton?: boolean;
+    showCancelButton?: boolean;
+    buttonPlacement?: 'start' | 'middle' | 'end';
+    submitButtonText?: string;
+    clearButtonText?: string;
+    cancelButtonText?: string;
+}
+declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FormProps>, {
+    showLabels: boolean;
+    showClearButton: boolean;
+    showCancelButton: boolean;
+    buttonPlacement: string;
+    submitButtonText: string;
+    clearButtonText: string;
+    cancelButtonText: string;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    submit: (formData: FormData, computedFormData: ComputedData) => void;
+    clear: () => void;
+    cancel: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FormProps>, {
+    showLabels: boolean;
+    showClearButton: boolean;
+    showCancelButton: boolean;
+    buttonPlacement: string;
+    submitButtonText: string;
+    clearButtonText: string;
+    cancelButtonText: string;
+}>>> & {
+    onSubmit?: ((formData: FormData, computedFormData: ComputedData) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onClear?: (() => any) | undefined;
+}, {
+    showLabels: boolean;
+    showClearButton: boolean;
+    showCancelButton: boolean;
+    buttonPlacement: "start" | "middle" | "end";
+    submitButtonText: string;
+    clearButtonText: string;
+    cancelButtonText: string;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+//# sourceMappingURL=vForm.vue.d.ts.map

package/dist/components/vForm.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vForm.vue.d.ts","sourceRoot":"","sources":["../../src/components/vForm.vue"],"names":[],"mappings":"AAqCA;AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAa,MAAM,UAAU,CAAC;AAK9E,UAAU,SAAS;IACjB,MAAM,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;gBAPc,OAAO;qBACF,OAAO;sBACN,OAAO;qBACR,OAAO,GAAG,QAAQ,GAAG,KAAK;sBACzB,MAAM;qBACP,MAAM;sBACL,MAAM;;AAqR3B,wBAOG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}