feat: finishing docs

Author: alvarosabu

.gitignore

@@ -2,11 +2,12 @@
 node_modules
 **/node_modules
 /dist
-/docs/.vuepress/dist
+/docs/.vitepress/dist
 /coverage
 /tests/e2e/videos/
 /tests/e2e/screenshots/
 /temp
+
 # local env files
 .env.local
 .env.*.local

docs/.vitepress/config.js

@@ -39,6 +39,10 @@ const config = {
               text: 'Validation',
               link: '/guide/validation',
             },
+            {
+              text: 'Models',
+              link: '/guide/models',
+            },
           ],
         },
         {

docs/guide/api/props/dynamic-form-props.md

@@ -23,6 +23,6 @@ export interface DynamicForm {
 It contains the following properties:
 
 - `id` : this field of type `string` contains the form [id](https://developer.mozilla.org/en-US/search?q=form), is especially useful to access your form via javascript when accessing the DOM, also helps to assign external inputs or submit buttons via form attribute.
-- `fields`: this property holds an `Object` of type [`FormFields`](../types.md#form-fields) which is going to be the base of creating the input controls.
+- `fields`: this property holds an `Object` of type [`FormFields`](../../models.md#form-fields) which is going to be the base of creating the input controls.
 - `field-order`: contains the desired order of the fields as an `Array` of strings.
-- `options`: Contains all the form options using [`FormOptions`](../types.md#form-options)
+- `options`: Contains all the form options using [`FormOptions`](../../models.md#form-options)

docs/guide/api/props/dynamic-input-props.md

@@ -36,7 +36,7 @@ export type FormControl<T extends InputType> = T & {
 
 ## `forceValidation`
 
-By default, input validation can be triggered by a `blur` or a `change` event on the input (Check [validation](../../guide/validation.md)). However you can force the validation state of the input by changing this prop to `true`.
+By default, input validation can be triggered by a `blur` or a `change` event on the input (Check [validation](../../validation.md)). However you can force the validation state of the input by changing this prop to `true`.
 
 ```typescript
   forceValidation: {

docs/guide/fields.md

@@ -13,7 +13,7 @@ By default, `Vue Dynamic Forms` cover the following input types:
 - Textarea
 
 ::: tip
-You can also include your very own custom input using `slots` (Check [Slots](../advanced/slots.md))
+You can also include your very own custom input using `slots` (Check [Slots](./advanced/slots.md))
 :::
 
 ## Text

docs/guide/models.md

@@ -0,0 +1,258 @@
+## Form Fields & Inputs
+
+### `FieldType`
+
+```ts
+export enum FieldTypes {
+  TEXT = 'text',
+  TEXTAREA = 'textarea',
+  SELECT = 'select',
+  NUMBER = 'number',
+  EMAIL = 'email',
+  URL = 'url',
+  PASSWORD = 'password',
+  CHECKBOX = 'checkbox',
+  RADIO = 'radio',
+  CUSTOM = 'custom-field',
+  COLOR = 'color',
+}
+```
+
+### `InputType`
+
+```ts
+export type InputType =
+  | TextInput
+  | NumberInput
+  | SelectInput
+  | TextAreaInput
+  | CheckboxInput
+  | RadioInput
+  | EmailInput
+  | PasswordInput
+  | RadioInput
+  | ColorInput
+  | UrlInput
+  | CustomInput
+```
+
+### `FormFields`
+
+```ts
+export type FormFields = {
+  [key: string]: InputType
+}
+```
+
+### `InputBase`
+
+```ts
+export interface InputBase {
+  name?: string
+  label?: string
+  ariaLabel?: string
+  ariaLabelledBy?: string
+  disabled?: boolean
+  customClass?: string | string[] | BindingObject | BindingObject[] | unknown
+  customStyles?: string | string[] | BindingObject | BindingObject[] | unknown
+  placeholder?: string
+  autocomplete?: string
+  readonly?: boolean
+  validations?: FormValidator[]
+  validationTrigger?: ValidationTrigger
+}
+```
+
+### `TextInput`
+
+```ts
+export type TextInput = InputBase & {
+  type: FieldTypes.TEXT
+  value?: string
+}
+```
+
+### `TextInput`
+
+```ts
+export type NumberInput = InputBase & {
+  type: FieldTypes.NUMBER
+  value: number
+  min: number
+  max: number
+  step: number
+}
+```
+
+### `SelectInput`
+
+```ts
+export type SelectInput<T = boolean | string> = InputBase & {
+  type: FieldTypes.SELECT
+  value: T
+  optionValue: string
+  optionLabel: string
+  options?: { label: string; value: string; disabled?: boolean }[]
+}
+```
+
+### `TextAreaInput`
+
+```ts
+export type TextAreaInput = InputBase & {
+  type: FieldTypes.TEXTAREA
+  value: string
+  cols?: number
+  rows?: number
+}
+```
+
+### `CheckboxInput`
+
+```ts
+export type CheckboxInput = InputBase & {
+  type: FieldTypes.CHECKBOX
+  value: boolean
+}
+```
+
+### `RadioInput`
+
+```ts
+export type RadioInput = InputBase & {
+  type: FieldTypes.RADIO
+  value: string
+  options?: { key: string; value: string; disabled?: boolean }[]
+}
+```
+
+### `CustomInput`
+
+```ts
+export type CustomInput = InputBase & {
+  type: FieldTypes.CUSTOM
+  value: boolean | string | number
+}
+```
+
+### `EmailInput`
+
+```ts
+export type EmailInput = InputBase & {
+  type: FieldTypes.EMAIL
+  value: string
+}
+```
+
+### `PasswordInput`
+
+```ts
+export type PasswordInput = InputBase & {
+  type: FieldTypes.PASSWORD
+  value: string
+}
+```
+
+### `ColorInput`
+
+```ts
+export type ColorInput = InputBase & {
+  type: FieldTypes.COLOR
+  value: string
+}
+```
+
+### `UrlInput`
+
+```ts
+export type UrlInput = InputBase & {
+  type: FieldTypes.URL
+  value: string
+}
+```
+
+## Form
+
+### `FormOptions`
+
+```ts
+export interface FormOptions {
+  customClass?: string | string[] | BindingObject | BindingObject[] | unknown
+  customStyles?: string | string[] | BindingObject | BindingObject[] | unknown
+  method?: string
+  netlify?: boolean
+  netlifyHoneypot?: string
+  autocomplete?: boolean | string
+  resetAfterSubmit?: boolean
+}
+```
+
+### `DynamicForm`
+
+```ts
+export interface DynamicForm {
+  id: string
+  fields: FormFields
+  fieldOrder?: string[]
+  options?: FormOptions
+}
+```
+
+## Controls & Validation
+
+### `ValidationTrigger`
+
+```ts
+export enum ValidationTriggerTypes {
+  BLUR = 'blur',
+  CHANGE = 'change',
+}
+export interface ValidationTrigger {
+  type: ValidationTriggerTypes
+  threshold: number
+}
+```
+
+### `ValidatorFn`
+
+```ts
+export interface ValidatorFn {
+  (value: ControlValue | undefined): ValidationErrors | null
+}
+```
+
+### `ValidationErrors`
+
+```ts
+export type ValidationErrors = {
+  // eslint-disable-next-line
+  [key: string]: any
+}
+```
+
+### `FormValidator`
+
+```ts
+export interface FormValidator {
+  validator: ValidatorFn
+  text: string
+  type?: string
+}
+```
+
+### `ControlValue`
+
+```ts
+export type ControlValue = string | number | boolean
+```
+
+### `FormControl`
+
+```ts
+export type FormControl<T extends InputType> = T & {
+  valid: boolean
+  dirty: boolean
+  touched: boolean
+  errors: ValidationErrors | null
+}
+```

docs/guide/theming/basic.md

@@ -8,7 +8,7 @@ If you want a more "ready to go" solution you can import one of the themes we ha
 
 More themes are in progress.
 
-## Defaul Theme
+## Default Theme
 
 Similar to default bootstrap theme for forms.
 
@@ -31,7 +31,7 @@ $input-border-color: #aec64c;
 
 You have all this variables to customize your form inputs.
 
-Consider that this variables will affect **All** your inputs, for more selective styling please use `customClass` available on the [models](./models.md).
+Consider that this variables will affect **All** your inputs, for more selective styling please use `customClass` available on the [models](../models.md).
 
 ```scss
 $font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
@@ -93,7 +93,7 @@ module.exports = {
 
 You have all this variables to customize your form inputs.
 
-Consider that this variables will affect **All** your inputs, for more selective styling please use `customClass` available on the [models](./models.md).
+Consider that this variables will affect **All** your inputs, for more selective styling please use `customClass` available on the [models](../models.md)..
 
 ```scss
 $theme-color: #6200ee;

docs/netlify.toml

@@ -0,0 +1,7 @@
+[build]
+  publish = ".vitepress/dist"
+  command = "npm run docs:build"
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200

tailwind.config.js

@@ -1,5 +1,6 @@
 // tailwind.config.js
 module.exports = {
+  purge: ['./src/**/*.html', './src/**/*.vue', './src/**/*.ts'],
   theme: {
     fontFamily: {
       display: ['Montserrat'],