From 11b82bcd56b41c76741908959d524aed7de36f17 Mon Sep 17 00:00:00 2001 From: Alvaro Saburido Date: Thu, 21 Jan 2021 16:46:49 +0100 Subject: [PATCH] docs(usage): usage guide --- docs/v3/guide/usage.md | 117 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 116 insertions(+), 1 deletion(-) diff --git a/docs/v3/guide/usage.md b/docs/v3/guide/usage.md index 3c17181..da9dc98 100644 --- a/docs/v3/guide/usage.md +++ b/docs/v3/guide/usage.md @@ -1 +1,116 @@ -Coming soon. 😜 +## Form Composition + +The dynamic form component `` is pretty straight-forward. 😁 + +You will only need to add it to your template like this: + +```html + +``` + +And pass trough the `DynamicForm` object as a prop: + +```typescript +setup() { + const form = ref({ + id: 'my-awesome-form, + fields: { + name: TextField({ + label: 'Name', + }), + email: EmailField({ + label: 'Email', + }), + password: PasswordField({ + label: 'Password', + autocomplete: 'current-password', + validations: [passwordValidator], + }), + } + }); + + return { form } +} +``` + +If you're using [VueI18n](https://kazupon.github.io/vue-i18n/) or any property of your form fields for example: `customClass`, `options` needs to be reactive you can also declare the form as a `computed` property like this: + +```typescript +import { useI18n } from "./i18nPlugin"; + +setup() { + const i18n = useI18n(); + let consoleOptions = ref([]); + + const form = computed(() => ({ + id: 'my-awesome-form, + fields: { + name: TextField({ + label: i18n.t('name'), + }), + email: EmailField({ + label: i18n.t('email'), + }), + console: SelectField({ + label: 'Console (Async Options)', + optionValue: 'console', + options: consoleOptions.value, + }), + } + })); + + onMounted(async () => { + try { + consoleOptions.value = await yourApiCall(); + } catch (e) { + console.error(e); + } + }); + + return { form } +} +``` + +## Submitting the form + +This is the recommended way to use the `dynamic-forms` with all the features. (Built-in Validations included). + +```html + +``` + +## Values Changed + +The library provides you the possibility of submitting the form (check the previous section) or listen to the values change directly, using the `change` event. + +```html + +``` + +```js +methods: { + updateValues(values) { + // Apply your own validation + // Do what you need with the data + } +} +``` + +::: warning +By using `change` event, you are giving up to the built-in validation, which is only available if the form is submitted. You will need to apply the validation yourself or use the `error` event. +:::