feat(formkit): integration module

packages/docs/nuxt.config.ts

@@ -74,12 +74,14 @@ export default defineNuxtConfig({
   nitro: {
     // compressPublicAssets: true,
   },
+
   gtm: {
     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']
     enabled: process.env.GTM_ENABLED === 'true', // defaults to true. Plugin can be disabled by setting this to false for Ex: enabled: !!GDPR_Cookie (optional)
   },
 
   modules: [
+    '@formkit/nuxt',
     './modules/repl',
     './modules/banner',
     './modules/vuestic',
@@ -139,7 +141,6 @@ export default defineNuxtConfig({
     },
   },
 
-
   css: [
     '@/assets/css/tailwind.css',
   ],
@@ -183,6 +184,12 @@ export default defineNuxtConfig({
     }
   },
 
+  formkit: {
+    autoImport: true,
+  },
+
+  compatibilityDate: '2024-11-29',
+
   devtools: {
     enabled: false,
   }

packages/docs/package.json

@@ -41,6 +41,8 @@
   },
   "dependencies": {
     "@docsearch/js": "^3.2.1",
+    "@formkit/nuxt": "^1.6.9",
+    "@formkit/vue": "^1.6.9",
     "@funken-studio/sitemap-nuxt-3": "^4.0.4",
     "@nuxtjs/google-fonts": "^3.0.1",
     "@types/acorn": "^6.0.0",

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

@@ -0,0 +1,70 @@
+<template>
+  <h1 class="text-2xl font-bold mb-4">
+    Carbon Sequestration Grant
+  </h1>
+
+  <FormKit
+    v-slot="{ state: { loading } }"
+    v-model="formValue"
+    :type="types.form"
+    class="grid grid-cols-1 md:grid-cols-3 gap-6"
+    :submit-label="loading ? 'Submitting...' : ''"
+    @submit="submitApp"
+  >
+    <div>
+      <FormKit
+        :type="types.email"
+        name="email"
+        label="*Email address"
+        validation="required|email"
+      />
+    </div>
+
+    <div>
+      <FormKit
+        :type="types.text"
+        name="organization_name"
+        label="*Organization name"
+        validation="required|length:3"
+      />
+    </div>
+
+    <div>
+      <FormKit
+        :type="types.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>
+import * as types from '@vuestic/formkit'
+
+// 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>

packages/docs/page-config/extensions/formkit/examples/Button.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import * as types from '@vuestic/formkit'
+
+type HTMLElementEvent<T = HTMLElement> = Event & {
+  target: T;
+}
+
+const randomColor = (e: HTMLElementEvent) => {
+  const hex = Math
+    .floor(Math.random()*16777215)
+    .toString(16);
+
+  e.target!.setAttribute(
+    'style',
+    'background-color: #' + hex + '88;'
+  )
+}
+</script>
+
+<template>
+  <div class="grid gap-6">
+    <FormKit
+      :type="types.button"
+      color="danger"
+      label="Checkout my label"
+      help="You can use the label prop."
+    />
+
+    <FormKit
+      :type="types.button"
+      help="You can use the default slot."
+      prefix-icon="check"
+    >
+      I have slot content
+    </FormKit>
+
+    <FormKit
+      :type="types.button"
+      help="You can bind event listeners."
+      @click="randomColor"
+    >
+      Click me!
+    </FormKit>
+  </div>
+</template>
+

packages/docs/page-config/extensions/formkit/examples/Checkbox.vue

@@ -0,0 +1,15 @@
+<template>
+  <FormKit
+    :type="types.checkbox"
+    label="Terms and Conditions"
+    help="Do you agree to our terms of service?"
+    name="terms"
+    :value="true"
+    validation="accepted"
+    validation-visibility="dirty"
+  />
+</template>
+
+<script setup lang="ts">
+import * as types from '@vuestic/formkit'
+</script>