-
Notifications
You must be signed in to change notification settings - Fork 351
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(formkit): integration module (#4435)
Co-authored-by: Yauheni Prakopchyk <[email protected]> Co-authored-by: raichev-dima <[email protected]>
- Loading branch information
3 people
authored
Jan 22, 2025
1 parent
09c949c
commit b1aed63
Showing
73 changed files
with
3,364 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import { defaultConfig } from '@formkit/vue' | ||
| import * as inputs from '@vuestic/formkit' | ||
|
|
||
| export default defaultConfig({ | ||
| inputs, | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
174 changes: 174 additions & 0 deletions
174
packages/docs/page-config/extensions/formkit/examples/AdvancedForm.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,174 @@ | ||
| <template> | ||
| <FormKit | ||
| id="advancedForm" | ||
| v-slot="{ state: { valid } }" | ||
| v-model="form" | ||
| type="form" | ||
| class="flex flex-col items-baseline gap-6" | ||
| :actions="false" | ||
| > | ||
| <FormKit | ||
| name="firstName" | ||
| type="text" | ||
| label="First Name" | ||
| validation="required" | ||
| /> | ||
|
|
||
| <FormKit | ||
| name="lastName" | ||
| type="text" | ||
| label="Last Name" | ||
| validation="required" | ||
| /> | ||
|
|
||
| <FormKit | ||
| name="birthDate" | ||
| type="datepicker" | ||
| label="Birth Date" | ||
| clearable | ||
| :validation-rules="{ birthday }" | ||
| validation="required|birthday" | ||
| :validation-messages="{ | ||
| birthday: 'You must be at least 18 years old' | ||
| }" | ||
| /> | ||
|
|
||
| <FormKit | ||
| name="count" | ||
| type="counter" | ||
| label="Amount" | ||
| validation="required|min:10" | ||
| :validation-messages="{ | ||
| min: 'You can not buy less than 10 items' | ||
| }" | ||
| manual-input | ||
| /> | ||
|
|
||
| <FormKit | ||
| name="country" | ||
| type="select" | ||
| :options="countries" | ||
| label="Country" | ||
| validation="required|is:us,uk" | ||
| :validation-rules="{ is: (node, ...group) => group.includes(node.value?.value) }" | ||
| :validation-messages="{ | ||
| is: 'Delivery currently unavailable in your country' | ||
| }" | ||
| /> | ||
|
|
||
| <FormKit | ||
| name="amount" | ||
| type="slider" | ||
| :min="1" | ||
| :max="100" | ||
| label="Weight, kg" | ||
| style="width: 100%" | ||
| validation="required|package" | ||
| :validation-rules="{ | ||
| package: (node) => { | ||
| return node.parent.value.country.value === 'us' ? node.value < 20 : true | ||
| } | ||
| }" | ||
| :validation-messages="{ package: 'Package to US can not be more than 20kg' }" | ||
| /> | ||
|
|
||
| <FormKit | ||
| name="notifications" | ||
| type="toggle" | ||
| label="Notifications" | ||
| size="small" | ||
| validation="accepted" | ||
| :validation-messages="{ | ||
| accepted: 'You must agree on notifications' | ||
| }" | ||
| /> | ||
|
|
||
| <div> | ||
| <span class="va-title">Payment method</span> | ||
| <FormKit | ||
| name="paymentMethod" | ||
| type="radio" | ||
| :options="['Visa', 'MasterCard', 'PayPal']" | ||
| validation="required|is:PayPal" | ||
| :validation-messages="{ is: 'Only PayPal is currently available' }" | ||
| /> | ||
| </div> | ||
|
|
||
| <FormKit | ||
| name="acknowledgement" | ||
| type="checkbox" | ||
| label="I'm okay if you lose my package" | ||
| validation="accepted" | ||
| :validation-messages="{ accepted: 'You must agree with terms and conditions' }" | ||
| /> | ||
|
|
||
| <FormKit type="submit" :disabled="!valid" @click="submit()"> | ||
| Submit | ||
| </FormKit> | ||
| </FormKit> | ||
|
|
||
| <div class="mt-8 flex w-full gap-3 background-element"> | ||
| <FormKit type="button" @click="submitForm('advancedForm')"> | ||
| Validate | ||
| </FormKit> | ||
| <FormKit type="button" @click="reset('advancedForm', form)"> | ||
| Reset validation | ||
| </FormKit> | ||
| <FormKit | ||
| type="button" | ||
| @click="resetForm()" | ||
| > | ||
| Reset | ||
| </FormKit> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { ref } from 'vue'; | ||
| import { reset, submitForm } from '@formkit/core' | ||
| const resetForm = () => reset('advancedForm', { | ||
| firstName: '', | ||
| lastName: '', | ||
| country: '', | ||
| birthDate: null as Date | null, | ||
| time: null as Date | null, | ||
| acknowledgement: false, | ||
| notifications: true, | ||
| paymentMethod: '', | ||
| amount: 1, | ||
| count: 1, | ||
| }) | ||
| const form = ref({ | ||
| firstName: '', | ||
| lastName: '', | ||
| country: '', | ||
| birthDate: null as Date | null, | ||
| acknowledgement: false, | ||
| notifications: true, | ||
| paymentMethod: '', | ||
| amount: 1, | ||
| count: 1, | ||
| }) | ||
| const countries = [ | ||
| { value: 'ua', text: 'Ukraine' }, | ||
| { value: 'us', text: 'USA' }, | ||
| { value: 'uk', text: 'United Kingdom' }, | ||
| ] | ||
| const birthday = (node: any) => { | ||
| const today = new Date() | ||
| let yearDiff = today.getFullYear() - node.value.getFullYear() | ||
| const monthDiff = today.getMonth() - node.value.getMonth() | ||
| if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < node.value.getDate())) { | ||
| yearDiff-- | ||
| } | ||
| return yearDiff >= 18 | ||
| } | ||
| const submit = () => alert('Form submitted!') | ||
| </script> |
66 changes: 66 additions & 0 deletions
66
packages/docs/page-config/extensions/formkit/examples/BasicForm.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| <template> | ||
| <h1 class="text-2xl font-bold mb-4"> | ||
| Carbon Sequestration Grant | ||
| </h1> | ||
|
|
||
| <FormKit | ||
| v-model="formValue" | ||
| type="form" | ||
| class="grid grid-cols-1 md:grid-cols-3 gap-6" | ||
| @submit="submitApp" | ||
| > | ||
| <div> | ||
| <FormKit | ||
| type="email" | ||
| name="email" | ||
| label="*Email address" | ||
| validation="required|email" | ||
| /> | ||
| </div> | ||
|
|
||
| <div> | ||
| <FormKit | ||
| type="text" | ||
| name="organization_name" | ||
| label="*Organization name" | ||
| validation="required|length:3" | ||
| /> | ||
| </div> | ||
|
|
||
| <div> | ||
| <FormKit | ||
| type="textarea" | ||
| name="money_use" | ||
| label="*How will you use the money?" | ||
| validation="required|length:5,10" | ||
| /> | ||
| </div> | ||
| </FormKit> | ||
|
|
||
| <VaCollapse | ||
| class="min-w-96 mt-4" | ||
| header="Form data" | ||
| > | ||
| <pre>{{ formValue }}</pre> | ||
| </VaCollapse> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| // NEW: submit handler, which posts to our fake backend. | ||
| const submitApp = async (_formData, node) => { | ||
| await new Promise(resolve => setTimeout(resolve, 1400)) | ||
| node.clearErrors() | ||
| alert('Your application was submitted successfully!') | ||
| } | ||
| const formValue = ref({}) | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| details { | ||
| border: 1px solid #ccccd7;; | ||
| background: #eeeef4; | ||
| border-radius: .15em; | ||
| padding: 1em; | ||
| } | ||
| </style> |
Oops, something went wrong.