@uniquedj95/vform 1.7.0 → 2.0.2

package/README.md

@@ -1,5 +1,41 @@
+<div align="center">
+
 # vForm
 
+<img src="https://img.icons8.com/color/96/000000/form.png" alt="vForm Logo"/>
+
+A dynamic form builder for Vue.js with Ionic components
+
+[![Version](https://img.shields.io/badge/version-2.0.2-blue.svg)](https://github.com/uniquedj95/vform/releases)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![Vue Version](https://img.shields.io/badge/vue-3.5+-brightgreen.svg)](https://vuejs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.5-blue)](https://www.typescriptlang.org/)
+[![Downloads](https://img.shields.io/npm/dt/@uniquedj95/vform.svg)](https://www.npmjs.com/package/@uniquedj95/vform)
+[![Ionic Vue](https://img.shields.io/badge/Ionic-8.2-blue)](https://ionicframework.com/)
+[![Bundle Size](https://img.shields.io/bundlephobia/min/@uniquedj95/vform)](https://bundlephobia.com/package/@uniquedj95/vform)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/uniquedj95/vform/pulls)
+</div>
+
+## Table of Contents
+- [Overview](#overview)
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Schema Structure](#schema-structure)
+  - [Example Schema](#example-schema)
+  - [Field Configuration Options](#field-configuration-options)
+- [Form Events](#form-events)
+- [Form Methods](#form-methods)
+- [Form Props](#form-props)
+- [Advanced Components](#advanced-components)
+  - [SelectInput](#selectinput)
+  - [Custom Buttons](#custom-buttons)
+  - [RepeatInput](#repeatinput)
+  - [Option Descriptions](#option-descriptions)
+  - [Date Pattern Formatting](#date-pattern-formatting)
+- [Issue Reporting and Feedback](#issue-reporting-and-feedback)
+- [Contributors](#contributors)
+
 ## 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.
 
@@ -7,20 +43,44 @@ vForm is a Vue.js component that dynamically generates forms based on a provided
 - **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.
+- **Enhanced Date Input Field**: Custom date formatting and handling with integrated date picker.
+- **Multiple Selection Interfaces**: Three different interfaces for select inputs (popover, action sheet, alert).
+- **Repeatable Field Groups**: Create dynamic, repeatable sets of form fields.
+- **Advanced Validation**: Built-in validation with support for custom validation functions.
+- **Computed Values**: Generate and transform values based on other form fields.
+- **Customizable Styling**: Control appearance with flexible styling options.
+- **Form Actions**: Customizable buttons with support for additional custom actions.
+- **Rich Text Areas**: Textarea inputs with auto-grow capability and character counting.
+- **Form Field Dependencies**: Create relationships between fields that react to changes.
+- **Option Descriptions**: Add helpful descriptions to select and checkbox options.
 
 ## Installation
-1. Using NPM package manager
-    ```sh
-    npm install @uniquedj95/vform
-    ```
-2. Using YARN package manager
-    ```sh
-    yarn add @uniquedj95/vform
-    ```
+
+1. Install the package using your preferred package manager:
+
+   Using NPM:
+   ```sh
+   npm install @uniquedj95/vform
+   ```
+   
+   Using Yarn:
+   ```sh
+   yarn add @uniquedj95/vform
+   ```
+
+2. Make sure you have the required peer dependencies:
+   - Vue 3.5+
+   - Ionic Vue (for UI components)
+
+   ```sh
+   npm install @ionic/vue ionicons
+   ```
+
+   or
+
+   ```sh
+   yarn add @ionic/vue ionicons
+   ```
 
 ## Usage
 1. Register `VForm` component in your Vue.js application:
@@ -33,7 +93,7 @@ vForm is a Vue.js component that dynamically generates forms based on a provided
     import { VForm } from '@uniquedj95/vform';
 
     /* Import CSS styles and other components here */
-    import '@uniquedj95/vform/styles.css'
+    import '@uniquedj95/vform/vform.css'
 
     const app = createApp(App)
         .use(IonicVue)
@@ -74,58 +134,308 @@ vForm is a Vue.js component that dynamically generates forms based on a provided
     ```
 
 ## Schema Structure
-The schema object should define the structure of the form. Each key in the schema represents a form field with its configuration:
+The schema object should define the structure of the form. Each key in the schema represents a form field with its configuration.
+
+### Example Schema
+```typescript
+const formSchema: FormSchema = {
+  firstName: {
+    type: 'TextInput',
+    label: 'First Name',
+    required: true,
+    grid: { xs: '12', md: '6' }
+  },
+  lastName: {
+    type: 'TextInput',
+    label: 'Last Name',
+    required: true,
+    grid: { xs: '12', md: '6' }
+  },
+  birthDate: {
+    type: 'DateInput',
+    label: 'Date of Birth',
+    required: true,
+    pattern: 'DD/MMM/YYYY'
+  },
+  email: {
+    type: 'EmailInput',
+    label: 'Email Address',
+    required: true,
+    validation: (value) => {
+      if (!value.includes('@')) {
+        return ['Invalid email format'];
+      }
+      return null;
+    }
+  },
+  category: {
+    type: 'SelectInput',
+    label: 'Category',
+    options: [
+      { label: 'Option 1', value: '1' },
+      { label: 'Option 2', value: '2', description: { text: 'With an explanation', color: 'secondary', show: 'always' } }
+    ]
+  },
+  notes: {
+    type: 'TextAreaInput',
+    label: 'Notes',
+    rows: 4,
+    autoGrow: true
+  }
+};
+```
 
 ### 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.
+
+#### Input Types
+The following input types are supported:
+
+| Type | Description |
+|------|-------------|
+| `TextInput` | Standard text input field |
+| `DateInput` | Date picker with customizable format |
+| `NumberInput` | Numeric input field |
+| `EmailInput` | Input field with email validation |
+| `PasswordInput` | Secure password input with toggle visibility |
+| `TextAreaInput` | Multi-line text input |
+| `SelectInput` | Dropdown selection |
+| `CheckboxInput` | Toggle on/off input |
+| `RepeatInput` | Repeatable group of fields |
+
+#### Common Properties
+
+| Property | Type | Description | Applies To |
+|----------|------|-------------|------------|
+| `label` | `string` | The label displayed for the form field | All |
+| `placeholder` | `string` | Placeholder text for the input field | Text-based inputs |
+| `required` | `boolean` | Determines if the field is required for form submission | All |
+| `disabled` | `boolean` | Disables the input field if set to `true` | All |
+| `hidden` | `boolean` | Hides the field completely if set to `true` | All |
+| `autoFocus` | `boolean` | Automatically focuses the input field on form load | All |
+| `error` | `string` | Custom error message for the field | All |
+| `fill` | `"solid" \| "outline"` | Defines the fill style of the input field | All |
+| `labelPlacement` | `"stacked" \| "start" \| "end" \| "fixed" \| "floating"` | Determines the position of the label | All |
+
+#### Layout Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `grid` | `GridSize` | Specifies responsive grid sizes: `xs`, `sm`, `md`, `lg`, `xl` |
+| `icon` | `string` | Icon to display within the input field |
+| `prefix` | `string` | Text to display before the input value |
+| `suffix` | `string` | Text to display after the input value |
+
+#### Validation and Dynamic Behavior
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `validation` | `FormValidator` | Custom validation function: `(value: FormValue, schema?: FormSchema) => Promise<Array<string> \| null> \| Array<string> \| null>` |
+| `condition` | `Function` | Function to determine if field should be rendered: `(data: FormData, computedData: ComputedData) => boolean` |
+| `computedValue` | `ComputedValueHandler` | Function to compute derived values: `(value: FormValue, schema: FormSchema) => Promise<any> \| any` |
+| `onChange` | `Function` | Function triggered on field value changes: `(value: FormValue) => FormValue` |
+
+#### Text Input Properties
+
+| Property | Type | Description | Applies To |
+|----------|------|-------------|------------|
+| `minLength` | `number` | Minimum text length | Text-based inputs |
+| `maxLength` | `number` | Maximum text length | Text-based inputs |
+| `pattern` | `string` | Regular expression pattern for validation | Text-based inputs |
+
+#### Number Input Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `min` | `number \| string` | Minimum value |
+| `max` | `number \| string` | Maximum value |
+
+#### TextArea Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `rows` | `number` | Number of visible text lines |
+| `cols` | `number` | Visible width in characters |
+| `autoGrow` | `boolean` | Automatic height adjustment based on content |
+| `counter` | `boolean` | Show character counter |
+
+#### Date Input Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `pattern` | `string` | Date format pattern (e.g., "DD/MMM/YYYY") |
+| `enableTime` | `boolean` | Enable time picker alongside date selection |
+
+#### Select Input Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `options` | `FormOptions` | Array of options or function returning options |
+| `multiple` | `boolean` | Allow multiple selections |
+| `interface` | `"popover" \| "action-sheet" \| "alert"` | How select options are displayed |
+| `optionsPlacement` | `"top" \| "bottom"` | Position of popover options list |
+
+#### RepeatInput Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `children` | `FormSchema` | Schema for the repeatable field group |
 
 ### 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`
+
+| Event | Description | Signature |
+|-------|-------------|-----------|
+| `submit` | Emitted when the form is submitted successfully after validation | `(formData: FormData, computedFormData: ComputedData) => void` |
+| `clear` | Emitted when the form fields are cleared to their initial state | `() => void` |
+| `cancel` | Emitted when the form submission is canceled, resetting fields | `() => void` |
+
+### Form Methods
+
+When accessing the VForm via a template ref, you can utilize these methods:
+
+| Method | Description | Return Type |
+|--------|-------------|-------------|
+| `resetForm()` | Resets all form fields to their initial state | `void` |
+| `isFormValid()` | Validates all form fields and returns validation state | `Promise<boolean>` |
+| `resolveData()` | Returns the current form data and computed data | `{ formData: FormData, computedData: ComputedData }` |
+
+### Advanced Components
+
+#### SelectInput
+The SelectInput component provides various display modes for selection options:
+
+- **Popover Interface**: Default presentation that displays options in a dropdown.
+  ```js
+  {
+    type: 'SelectInput',
+    label: 'Choose an option',
+    interface: 'popover', // default
+    optionsPlacement: 'bottom', // 'top' or 'bottom'
+    options: [...]
+  }
+  ```
+
+- **Action Sheet Interface**: Opens a sheet from the bottom of the screen with options.
+  ```js
+  {
+    type: 'SelectInput',
+    label: 'Choose an option',
+    interface: 'action-sheet',
+    options: [...]
+  }
+  ```
+  
+- **Alert Interface**: Displays options in a modal dialog.
+  ```js
+  {
+    type: 'SelectInput',
+    label: 'Choose an option',
+    interface: 'alert',
+    options: [...]
+  }
+  ```
+
+#### Custom Buttons
+You can add custom action buttons to the form with the `customButtons` prop:
+
+```js
+const customButtons = [
+  {
+    label: 'Save Draft',
+    icon: 'save',
+    fill: 'outline',
+    color: 'secondary',
+    action: () => saveDraft()
+  }
+];
+```
+
+#### RepeatInput
+The RepeatInput component allows for creating repeatable groups of fields:
+
+```js
+{
+  type: 'RepeatInput',
+  label: 'Add Items',
+  children: {
+    name: {
+      type: 'TextInput',
+      label: 'Item Name',
+      required: true
+    },
+    quantity: {
+      type: 'NumberInput',
+      label: 'Quantity',
+      required: true
+    }
+  }
+}
+```
+
+Each repeated set includes add and remove buttons, allowing the user to dynamically create or delete instances of the field group.
+
+#### Option Descriptions
+When using SelectInput or CheckboxInput, you can add descriptions to options:
+
+```js
+{
+  type: 'SelectInput',
+  label: 'Subscription Plan',
+  options: [
+    { 
+      label: 'Basic', 
+      value: 'basic',
+      description: {
+        text: 'Free plan with limited features',
+        color: 'secondary', // 'primary', 'warning', 'danger', 'secondary', 'light'
+        show: 'always' // or 'onChecked' to show only when selected
+      }
+    },
+    { 
+      label: 'Premium', 
+      value: 'premium',
+      description: {
+        text: 'Full access to all features',
+        color: 'primary',
+        show: 'always'
+      }
+    }
+  ]
+}
+```
+
+#### Date Pattern Formatting
+The DateInput component supports various date pattern formats:
+
+| Pattern | Description | Example |
+|---------|-------------|---------|
+| DD | Day of the month, two digits with leading zeros | 01 to 31 |
+| D | Day of the month without leading zeros | 1 to 31 |
+| MMM | Month name, abbreviated | Jan, Feb, Mar, etc. |
+| MMMM | Month name, full | January, February, etc. |
+| MM | Month as a number, with leading zeros | 01 to 12 |
+| M | Month as a number, without leading zeros | 1 to 12 |
+| YYYY | Year, four digits | 2025 |
+| YY | Year, two digits | 25 |
+| HH | Hour, two digits with leading zeros (24-hour) | 00 to 23 |
+| mm | Minutes, two digits with leading zeros | 00 to 59 |
+| ss | Seconds, two digits with leading zeros | 00 to 59 |
+
+Example: `DD/MMM/YYYY HH:mm:ss` would format as `07/Jun/2025 14:30:00`
 
 ### 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"`.
+
+| Property | Type | Description | Default |
+|----------|------|-------------|---------|
+| `schema` | `FormSchema` | The schema object defining the form structure and field configurations | *Required* |
+| `showLabels` | `boolean` | Determines if labels are displayed for each field | `true` |
+| `showClearButton` | `boolean` | Controls the visibility of the clear/reset button | `true` |
+| `showCancelButton` | `boolean` | Controls the visibility of the cancel button | `true` |
+| `buttonPlacement` | `'start' \| 'middle' \| 'end'` | Specifies the alignment of action buttons within the form | `'start'` |
+| `submitButtonText` | `string` | Custom text for the submit button | `"Submit"` |
+| `clearButtonText` | `string` | Custom text for the clear/reset button | `"Reset"` |
+| `cancelButtonText` | `string` | Custom text for the cancel button | `"Cancel"` |
+| `hideButtons` | `boolean` | When true, hides all action buttons | `false` |
+| `customButtons` | `Array<CustomButton>` | Array of custom buttons to add to the form | `[]` |
 
 ## 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.
@@ -139,3 +449,38 @@ I welcome contributions from the community! If you'd like to contribute, please
 
 Thank you to all the [contributors](https://github.com/uniquedj95/vform/graphs/contributors) who have helped make vForm better!
 
+## TypeScript Support
+
+vForm is built with TypeScript and provides complete type definitions for all components and interfaces. Import the types to get full IntelliSense support in your IDE:
+
+```typescript
+import { 
+  FormSchema, 
+  FormData, 
+  ComputedData, 
+  FormField, 
+  Option,
+  InputType, 
+  FormValidator,
+  ComputedValueHandler,
+  FormOptions,
+  GridSize,
+  CustomButton
+} from "@uniquedj95/vform";
+```
+
+When defining your form schema, you can use these types for proper type checking:
+
+```typescript
+import { reactive } from "vue";
+import { FormSchema } from "@uniquedj95/vform";
+
+const myFormSchema = reactive<FormSchema>({
+  // Your form fields here with proper type checking
+});
+```
+
+## License
+
+vForm is licensed under the MIT License. See the LICENSE file for more information.
+

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

@@ -1,28 +1,31 @@
-import { FormSchema, BaseFieldTypes } from 'types';
-import { PropType } from 'vue';
-
+import { FormField, FormSchema, BaseFieldTypes } from 'types';
+type __VLS_Props = {
+    schema?: FormSchema;
+    type?: BaseFieldTypes;
+};
+declare const model: import('vue').ModelRef<FormField, string, FormField, FormField>;
 declare function onReset(): void;
 declare function onValueUpdate(): Promise<void>;
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    modelValue: import('vue').PropType<any>;
-    schema: {
-        type: PropType<FormSchema>;
-    };
-    type: {
-        type: PropType<BaseFieldTypes>;
-    };
-}>, {
+type __VLS_PublicProps = {
+    modelValue?: typeof model['value'];
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     onValueUpdate: typeof onValueUpdate;
     onReset: typeof onReset;
     getErrors: () => string | undefined;
-}, {}, {}, {}, 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>;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: FormField) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: FormField) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    inputRef: import('vue').CreateComponentPublicInstanceWithMixins<import("@ionic/core").JSX.IonInput & import('@stencil/vue-output-target/runtime').InputProps<string | number | null | undefined> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, import("@ionic/core").JSX.IonInput & import('@stencil/vue-output-target/runtime').InputProps<string | number | null | undefined> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, {}, {}, {}, {}, {}> | null;
+}, any>;
 export default _default;
 //# sourceMappingURL=BaseInput.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/BaseInput.vue"],"names":[],"mappings":"AAgCA;AAGA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAc,MAAM,KAAK,CAAC;AAW3C,iBAAS,OAAO,SAIf;AAiBD,iBAAe,aAAa,kBAa3B;;gBAmBW,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;;;;;;;;;;;gBAA3B,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;;;;;;;AA2JvC,wBAUG"}
+{"version":3,"file":"BaseInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/BaseInput.vue"],"names":[],"mappings":"AAgCA;AAgGA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG9D,KAAK,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,UAAU,CAAC;IAAC,IAAI,CAAC,EAAE,cAAc,CAAA;CAAE,CAAC;AAElE,QAAA,MAAM,KAAK,iEAAoE,CAAC;AAMhF,iBAAS,OAAO,SAIf;AAiBD,iBAAe,aAAa,kBAa3B;AAuBD,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;CAClC,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;AA8KhB,wBAUG"}

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

@@ -1,22 +1,30 @@
-import { FormSchema } from 'types';
-import { PropType } from 'vue';
-
+import { FormField, FormSchema } from 'types';
+type __VLS_Props = {
+    schema?: FormSchema;
+};
+declare const model: import('vue').ModelRef<FormField, string, FormField, FormField>;
 declare function onReset(): void;
 declare function onValueUpdate(): Promise<void>;
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    modelValue: import('vue').PropType<any>;
-    schema: {
-        type: PropType<FormSchema>;
-    };
-}>, {
+type __VLS_PublicProps = {
+    modelValue?: typeof model['value'];
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     onValueUpdate: typeof onValueUpdate;
     onReset: typeof onReset;
     getErrors: () => string | undefined;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    modelValue: import('vue').PropType<any>;
-    schema: {
-        type: PropType<FormSchema>;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: FormField) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: FormField) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    inputRef: import('vue').CreateComponentPublicInstanceWithMixins<import("@ionic/core").JSX.IonCheckbox & import('@stencil/vue-output-target/runtime').InputProps<boolean | undefined> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, import("@ionic/core").JSX.IonCheckbox & import('@stencil/vue-output-target/runtime').InputProps<boolean | undefined> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, {}, {}, {}, {}, {}> | null;
+}, any>;
 export default _default;
 //# sourceMappingURL=CheckboxInput.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/CheckboxInput.vue"],"names":[],"mappings":"AAeA;AAGA,OAAO,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAc,MAAM,KAAK,CAAC;AAW3C,iBAAS,OAAO,SAIf;AAiBD,iBAAe,aAAa,kBAa3B;;gBAmBW,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;;;;;;;;gBAA3B,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;;;;AAuFvC,wBAUG"}
+{"version":3,"file":"CheckboxInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/CheckboxInput.vue"],"names":[],"mappings":"AAeA;AA8EA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG9C,KAAK,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,UAAU,CAAC;CAAE,CAAC;AAE5C,QAAA,MAAM,KAAK,iEAAoE,CAAC;AAMhF,iBAAS,OAAO,SAIf;AAiBD,iBAAe,aAAa,kBAa3B;AAuBD,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;CAClC,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;AAgGhB,wBAUG"}