+
+
+
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index a3a0a23..c4ddde8 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,12 +1,6 @@
import DefaultTheme, { Config } from 'vitepress/theme'
-import { createDynamicForms } from '../../../src'
-
-const modules = import.meta.globEager('../components/**/*.vue')
-const components = []
-
-for (const path in modules) {
- components.push(modules[path].default)
-}
+import { createDynamicForms } from '/@'
+import '../theme/styles/base.scss'
const VueDynamicForms = createDynamicForms({
autoValidate: true,
@@ -22,9 +16,6 @@ const theme: Config = {
...DefaultTheme,
enhanceApp({ app }) {
app.use(VueDynamicForms)
- components.forEach(component => {
- app.component(component.name, component)
- })
},
}
diff --git a/docs/.vitepress/theme/styles/base.scss b/docs/.vitepress/theme/styles/base.scss
new file mode 100644
index 0000000..4ed7521
--- /dev/null
+++ b/docs/.vitepress/theme/styles/base.scss
@@ -0,0 +1,104 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.nav-bar-title {
+ @apply flex items-center;
+}
+
+@layer base {
+ h1 {
+ @apply text-2xl mt-16 mb-9;
+ }
+ h2 {
+ @apply text-xl mt-9 mb-5;
+ }
+ p,
+ ol,
+ ul {
+ @apply my-4 leading-relaxed;
+ }
+
+ ol,
+ ul {
+ @apply pl-4;
+ }
+
+ ul {
+ @apply list-disc;
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ strong,
+ b {
+ @apply font-bold;
+ }
+
+ code {
+ @apply text-sm;
+ }
+}
+
+.custom-block {
+ @apply my-4 py-1 px-6;
+}
+
+.header-anchor {
+ @apply text-green-400;
+}
+
+a {
+ @apply text-green-400 font-bold;
+}
+
+.form-group {
+ @apply flex flex-col mb-4;
+}
+
+.form-label {
+ @apply w-full mb-2 text-sm font-bold;
+}
+
+.form-control {
+ @apply border-2 border-gray-300 rounded-lg px-4 py-2;
+
+ &:focus {
+ @apply outline-none border-green-400;
+ }
+
+ &--success {
+ @apply border-green-400 bg-green-50;
+ }
+
+ &--error {
+ @apply border-red-400 bg-red-50;
+ }
+}
+
+.form-hint {
+ @apply text-sm;
+}
+
+.form-error {
+ @apply text-red-500;
+}
+
+.checkbox-control,
+.radio-control {
+ @apply mr-4;
+}
+
+.checkbox-label,
+.radio-label {
+ @apply select-none cursor-pointer text-sm;
+}
+
+.checkbox-control:disabled ~ .checkbox-label,
+.radio-control:disabled ~ .radio-label {
+ @apply opacity-50 text-gray-500 cursor-not-allowed pointer-events-none;
+}
diff --git a/docs/guide/advanced/slots.md b/docs/guide/advanced/slots.md
new file mode 100644
index 0000000..0d78ebb
--- /dev/null
+++ b/docs/guide/advanced/slots.md
@@ -0,0 +1,53 @@
+## Custom Field
+
+Using dynamic scoped slots approach, now is easy to add your own custom fields to the `dynamic-forms` component.
+
+
+
+The first step is to add a new `FormField` with `type: 'custom-field'` to your form fields array in the components data:
+
+```javascript
+fields: {
+ avocado: CustomField({
+ label: 'My Avocado field',
+ }),
+},
+
+```
+
+Inside of the `dynamic-form` component, add a `` tag with the attribute `v-slot:nameOfYourField` equal to your custom `CustomField` `name` property (In this case, `avocado`).
+
+To make sure your component works within the same API, it's important to also add the deconstruction of the slot `v-slot:avocado="{ control, onChange, onFocus, onBlur }"` to the `` tag. This will allow your input to access data And methods from inside the `Dynamic Form component` such as:
+
+- `control`: contains `FormControl` instance // Check model 'FormControl`
+ - value
+ - type
+ - name
+ - dirty
+ - touched
+ - validations
+ - errors
+- `onChange`: event on input change
+- `onFocus`: event on input focus.
+- `onBlur`: event on input blur.
+
+```html
+
+
+
+
+ 🥑
+
+
+
+```
diff --git a/docs/guide/api/events.md b/docs/guide/api/events.md
new file mode 100644
index 0000000..5cb0d8e
--- /dev/null
+++ b/docs/guide/api/events.md
@@ -0,0 +1,68 @@
+## Dynamic form
+
+### `submit`
+
+Triggered when the form is submitted by clicking and `` or a `