Skip to content

Commit b1aed63

Browse files
m0ksemasvaeraichev-dima
authored
feat(formkit): integration module (#4435)
Co-authored-by: Yauheni Prakopchyk <[email protected]> Co-authored-by: raichev-dima <[email protected]>
1 parent 09c949c commit b1aed63

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+3364
-30
lines changed

‎package.json

+6-2
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"lint:style": "yarn workspace vuestic-ui lint:style",
2525
"serve:docs": "yarn workspace docs serve",
2626
"build:docs": "yarn workspace docs build",
27-
"build:docs:ci": "yarn workspace docs build:ci",
27+
"build:docs:ci": "yarn workspace @vuestic/formkit build && yarn workspace docs build:ci",
2828
"push": "yarn workspace vuestic-ui push",
2929
"push-production": "yarn workspace vuestic-ui push-production",
3030
"build:nuxt": "yarn workspace @vuestic/nuxt build",
@@ -34,7 +34,10 @@
3434
"sandbox:nuxt": "yarn workspace sandbox dev:nuxt",
3535
"sandbox:vue-cli": "yarn workspace sandbox dev:vue-cli",
3636
"sandbox:web-components": "yarn workspace sandbox dev:web-components",
37-
"release": "yarn workspace deploy release"
37+
"release": "yarn workspace deploy release",
38+
"serve:formkit": "yarn workspace @vuestic/formkit serve:storybook",
39+
"build:formkit": "yarn workspace @vuestic/formkit build:storybook",
40+
"start:formkit": "yarn workspace @vuestic/formkit start:storybook"
3841
},
3942
"workspaces": {
4043
"packages": [
@@ -56,6 +59,7 @@
5659
"@vue/server-renderer": "3.5.12",
5760
"@vue/compiler-dom": "3.5.12",
5861
"sass": "1.52.0",
62+
"typescript": "5.3.2",
5963
"vue-tsc": "2.0.7"
6064
}
6165
}

‎packages/docs/formkit.config.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { defaultConfig } from '@formkit/vue'
2+
import * as inputs from '@vuestic/formkit'
3+
4+
export default defaultConfig({
5+
inputs,
6+
})

‎packages/docs/nuxt.config.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -74,12 +74,14 @@ export default defineNuxtConfig({
7474
nitro: {
7575
// compressPublicAssets: true,
7676
},
77+
7778
gtm: {
7879
id: process.env.GTM_ID, // Your GTM single container ID, array of container ids ['GTM-xxxxxx', 'GTM-yyyyyy'] or array of objects [{id: 'GTM-xxxxxx', queryParams: { gtm_auth: 'abc123', gtm_preview: 'env-4', gtm_cookies_win: 'x'}}, {id: 'GTM-yyyyyy', queryParams: {gtm_auth: 'abc234', gtm_preview: 'env-5', gtm_cookies_win: 'x'}}], // Your GTM single container ID or array of container ids ['GTM-xxxxxx', 'GTM-yyyyyy']
7980
enabled: process.env.GTM_ENABLED === 'true', // defaults to true. Plugin can be disabled by setting this to false for Ex: enabled: !!GDPR_Cookie (optional)
8081
},
8182

8283
modules: [
84+
'@formkit/nuxt',
8385
'./modules/repl',
8486
'./modules/banner',
8587
'./modules/vuestic',
@@ -139,7 +141,6 @@ export default defineNuxtConfig({
139141
},
140142
},
141143

142-
143144
css: [
144145
'@/assets/css/tailwind.css',
145146
],
@@ -183,6 +184,13 @@ export default defineNuxtConfig({
183184
}
184185
},
185186

187+
formkit: {
188+
defaultConfig: false,
189+
autoImport: true,
190+
},
191+
192+
compatibilityDate: '2024-11-29',
193+
186194
devtools: {
187195
enabled: false,
188196
}

‎packages/docs/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
},
4242
"dependencies": {
4343
"@docsearch/js": "^3.2.1",
44+
"@formkit/nuxt": "^1.6.9",
4445
"@funken-studio/sitemap-nuxt-3": "^4.0.4",
4546
"@nuxtjs/google-fonts": "^3.0.1",
4647
"@types/acorn": "^6.0.0",

‎packages/docs/page-config/extensions/formkit/examples/AdvancedForm.vue

+174
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
<template>
2+
<FormKit
3+
id="advancedForm"
4+
v-slot="{ state: { valid } }"
5+
v-model="form"
6+
type="form"
7+
class="flex flex-col items-baseline gap-6"
8+
:actions="false"
9+
>
10+
<FormKit
11+
name="firstName"
12+
type="text"
13+
label="First Name"
14+
validation="required"
15+
/>
16+
17+
<FormKit
18+
name="lastName"
19+
type="text"
20+
label="Last Name"
21+
validation="required"
22+
/>
23+
24+
<FormKit
25+
name="birthDate"
26+
type="datepicker"
27+
label="Birth Date"
28+
clearable
29+
:validation-rules="{ birthday }"
30+
validation="required|birthday"
31+
:validation-messages="{
32+
birthday: 'You must be at least 18 years old'
33+
}"
34+
/>
35+
36+
<FormKit
37+
name="count"
38+
type="counter"
39+
label="Amount"
40+
validation="required|min:10"
41+
:validation-messages="{
42+
min: 'You can not buy less than 10 items'
43+
}"
44+
manual-input
45+
/>
46+
47+
<FormKit
48+
name="country"
49+
type="select"
50+
:options="countries"
51+
label="Country"
52+
validation="required|is:us,uk"
53+
:validation-rules="{ is: (node, ...group) => group.includes(node.value?.value) }"
54+
:validation-messages="{
55+
is: 'Delivery currently unavailable in your country'
56+
}"
57+
/>
58+
59+
<FormKit
60+
name="amount"
61+
type="slider"
62+
:min="1"
63+
:max="100"
64+
label="Weight, kg"
65+
style="width: 100%"
66+
validation="required|package"
67+
:validation-rules="{
68+
package: (node) => {
69+
return node.parent.value.country.value === 'us' ? node.value < 20 : true
70+
}
71+
}"
72+
:validation-messages="{ package: 'Package to US can not be more than 20kg' }"
73+
/>
74+
75+
<FormKit
76+
name="notifications"
77+
type="toggle"
78+
label="Notifications"
79+
size="small"
80+
validation="accepted"
81+
:validation-messages="{
82+
accepted: 'You must agree on notifications'
83+
}"
84+
/>
85+
86+
<div>
87+
<span class="va-title">Payment method</span>
88+
<FormKit
89+
name="paymentMethod"
90+
type="radio"
91+
:options="['Visa', 'MasterCard', 'PayPal']"
92+
validation="required|is:PayPal"
93+
:validation-messages="{ is: 'Only PayPal is currently available' }"
94+
/>
95+
</div>
96+
97+
<FormKit
98+
name="acknowledgement"
99+
type="checkbox"
100+
label="I'm okay if you lose my package"
101+
validation="accepted"
102+
:validation-messages="{ accepted: 'You must agree with terms and conditions' }"
103+
/>
104+
105+
<FormKit type="submit" :disabled="!valid" @click="submit()">
106+
Submit
107+
</FormKit>
108+
</FormKit>
109+
110+
<div class="mt-8 flex w-full gap-3 background-element">
111+
<FormKit type="button" @click="submitForm('advancedForm')">
112+
Validate
113+
</FormKit>
114+
<FormKit type="button" @click="reset('advancedForm', form)">
115+
Reset validation
116+
</FormKit>
117+
<FormKit
118+
type="button"
119+
@click="resetForm()"
120+
>
121+
Reset
122+
</FormKit>
123+
</div>
124+
</template>
125+
126+
<script setup lang="ts">
127+
import { ref } from 'vue';
128+
import { reset, submitForm } from '@formkit/core'
129+
130+
const resetForm = () => reset('advancedForm', {
131+
firstName: '',
132+
lastName: '',
133+
country: '',
134+
birthDate: null as Date | null,
135+
time: null as Date | null,
136+
acknowledgement: false,
137+
notifications: true,
138+
paymentMethod: '',
139+
amount: 1,
140+
count: 1,
141+
})
142+
143+
const form = ref({
144+
firstName: '',
145+
lastName: '',
146+
country: '',
147+
birthDate: null as Date | null,
148+
acknowledgement: false,
149+
notifications: true,
150+
paymentMethod: '',
151+
amount: 1,
152+
count: 1,
153+
})
154+
155+
const countries = [
156+
{ value: 'ua', text: 'Ukraine' },
157+
{ value: 'us', text: 'USA' },
158+
{ value: 'uk', text: 'United Kingdom' },
159+
]
160+
161+
const birthday = (node: any) => {
162+
const today = new Date()
163+
let yearDiff = today.getFullYear() - node.value.getFullYear()
164+
const monthDiff = today.getMonth() - node.value.getMonth()
165+
166+
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < node.value.getDate())) {
167+
yearDiff--
168+
}
169+
170+
return yearDiff >= 18
171+
}
172+
173+
const submit = () => alert('Form submitted!')
174+
</script>

‎packages/docs/page-config/extensions/formkit/examples/BasicForm.vue

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<template>
2+
<h1 class="text-2xl font-bold mb-4">
3+
Carbon Sequestration Grant
4+
</h1>
5+
6+
<FormKit
7+
v-model="formValue"
8+
type="form"
9+
class="grid grid-cols-1 md:grid-cols-3 gap-6"
10+
@submit="submitApp"
11+
>
12+
<div>
13+
<FormKit
14+
type="email"
15+
name="email"
16+
label="*Email address"
17+
validation="required|email"
18+
/>
19+
</div>
20+
21+
<div>
22+
<FormKit
23+
type="text"
24+
name="organization_name"
25+
label="*Organization name"
26+
validation="required|length:3"
27+
/>
28+
</div>
29+
30+
<div>
31+
<FormKit
32+
type="textarea"
33+
name="money_use"
34+
label="*How will you use the money?"
35+
validation="required|length:5,10"
36+
/>
37+
</div>
38+
</FormKit>
39+
40+
<VaCollapse
41+
class="min-w-96 mt-4"
42+
header="Form data"
43+
>
44+
<pre>{{ formValue }}</pre>
45+
</VaCollapse>
46+
</template>
47+
48+
<script setup>
49+
// NEW: submit handler, which posts to our fake backend.
50+
const submitApp = async (_formData, node) => {
51+
await new Promise(resolve => setTimeout(resolve, 1400))
52+
node.clearErrors()
53+
alert('Your application was submitted successfully!')
54+
}
55+
56+
const formValue = ref({})
57+
</script>
58+
59+
<style scoped>
60+
details {
61+
border: 1px solid #ccccd7;;
62+
background: #eeeef4;
63+
border-radius: .15em;
64+
padding: 1em;
65+
}
66+
</style>

0 commit comments

Comments
 (0)