feat(docs): configure the formkit to use vuestic inputs

epicmaxco · Jan 6, 2025 · 5201b31 · 5201b31
1 parent 6fe8861
commit 5201b31
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 27 deletions.
diff --git a/packages/docs/formkit.config.ts b/packages/docs/formkit.config.ts
@@ -0,0 +1,6 @@
+import { defaultConfig } from '@formkit/vue'
+import * as inputs from '@vuestic/formkit'
+
+export default defaultConfig({
+  inputs,
+})
diff --git a/packages/docs/nuxt.config.ts b/packages/docs/nuxt.config.ts
@@ -185,6 +185,7 @@ export default defineNuxtConfig({
   },
 
   formkit: {
+    defaultConfig: false,
     autoImport: true,
   },
 

diff --git a/packages/docs/page-config/extensions/formkit/examples/BasicForm.vue b/packages/docs/page-config/extensions/formkit/examples/BasicForm.vue
@@ -6,14 +6,14 @@
   <FormKit
     v-slot="{ state: { loading } }"
     v-model="formValue"
-    :type="types.form"
+    type="form"
     class="grid grid-cols-1 md:grid-cols-3 gap-6"
     :submit-label="loading ? 'Submitting...' : ''"
     @submit="submitApp"
   >
     <div>
       <FormKit
-        :type="types.email"
+        type="email"
         name="email"
         label="*Email address"
         validation="required|email"
@@ -22,7 +22,7 @@
 
     <div>
       <FormKit
-        :type="types.text"
+        type="text"
         name="organization_name"
         label="*Organization name"
         validation="required|length:3"
@@ -31,7 +31,7 @@
 
     <div>
       <FormKit
-        :type="types.textarea"
+        type="textarea"
         name="money_use"
         label="*How will you use the money?"
         validation="required|length:5,10"
@@ -48,8 +48,6 @@
 </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))

diff --git a/packages/docs/page-config/extensions/formkit/examples/MultiStepForm.vue b/packages/docs/page-config/extensions/formkit/examples/MultiStepForm.vue
@@ -34,7 +34,7 @@
   <FormKit
     v-slot="{ state: { valid, loading } }"
     v-model="formValue"
-    :type="types.form"
+    type="form"
     :plugins="[stepPlugin]"
     :actions="false"
     class="flex flex-col my-4 mx-2"
@@ -47,27 +47,27 @@
     >
       <FormKit
         id="contactInfo"
-        :type="types.group"
+        type="group"
         name="contactInfo"
       >
         <FormKit
-          :type="types.text"
+          type="text"
           label="*Full name"
           name="full_name"
           placeholder="First Last"
           validation="required"
         />
 
         <FormKit
-          :type="types.email"
+          type="email"
           name="email"
           label="*Email address"
           placeholder="[email protected]"
           validation="required|email"
         />
 
         <FormKit
-          :type="types.tel"
+          type="tel"
           name="tel"
           label="*Telephone"
           mask="+1 (###) ###-####"
@@ -88,7 +88,7 @@
       >
         <div>
           <FormKit
-            :type="types.text"
+            type="text"
             label="*Organization name"
             name="org_name"
             placeholder="MyOrg, Inc."
@@ -98,7 +98,7 @@
         </div>
         <div>
           <FormKit
-            :type="types.date"
+            type="date"
             label="Date of incorporation"
             :validation="date_rule"
             name="date_inc"
@@ -118,15 +118,15 @@
         name="application"
       >
         <FormKit
-          :type="types.checkbox"
+          type="checkbox"
           label="*I'm not a previous grant recipient"
           help="Have you received a grant from us before?"
           name="not_previous_recipient"
           validation="required|accepted"
           :validation-messages="{ accepted: 'We can only give one grant per organization.' }"
         />
         <FormKit
-          :type="types.textarea"
+          type="textarea"
           label="*How will you use the money?"
           name="how_money"
           help="Must be between 20 and 500 characters."
@@ -140,7 +140,7 @@
     <div class="flex justify-between mt-4">
       <div class="flex gap-3">
         <FormKit
-          :type="types.button"
+          type="button"
           preset="primary"
           :disabled="activeStep === 'contactInfo'"
           @click="setStep(-1)"
@@ -149,7 +149,7 @@
         </FormKit>
 
         <FormKit
-          :type="types.button"
+          type="button"
           preset="primary"
           class="next"
           :disabled="activeStep === 'application'"
@@ -159,7 +159,7 @@
         </FormKit>
       </div>
 
-      <FormKit :type="types.submit" :disabled="!valid">
+      <FormKit type="submit" :disabled="!valid">
         {{ loading ? 'Submitting...' : 'Submit Application' }}
       </FormKit>
     </div>

diff --git a/packages/docs/page-config/extensions/formkit/index.ts b/packages/docs/page-config/extensions/formkit/index.ts
@@ -10,8 +10,11 @@ import { createApp } from 'vue'
 import App from './App.vue'
 
 import { plugin, defaultConfig } from '@formkit/vue'
+import * as inputs from '@vuestic/formkit'
 
-createApp(App).use(plugin, defaultConfig).use(createVuestic()).mount('#app')
+createApp(App)
+  .use(plugin, defaultConfig({ inputs }))
+  .mount('#app')
 `;
 
 const dependencies = {
@@ -22,13 +25,12 @@ export default definePageConfig({
   blocks: [
     block.title("FormKit integration"),
     block.paragraph("If you need a powerful tool for building forms, we recommend using the [FormKit](https://formkit.com/getting-started/what-is-formkit)[[target=_blank]] form framework. Vuestic UI provides a ready-made style theme for this framework."),
+    block.headline("FormKit installation"),
+    block.paragraph("To start using FormKit, install the dependencies in your project."),
+    block.code(installCommandObject, "bash"),
+    block.paragraph("Then add the plugin to your main.* file"),
+    block.code(setupCode, "js"),
     block.paragraph("Here are some implementation examples of what is possible with Vuestic and FormKit:"),
-    // TODO That's not on npm yet.
-    // block.headline("FormKit installation"),
-    // block.paragraph("To start using FormKit, install the dependencies in your project."),
-    // block.code(installCommandObject, "bash"),
-    // block.paragraph("Then add the plugin to your main.* file"),
-    // block.code(setupCode, "js"),
     block.example("BasicForm", {
       codesandboxConfig: { dependencies },
       title: "Basic Form",

diff --git a/packages/formkit/.storybook/preview.ts b/packages/formkit/.storybook/preview.ts
@@ -1,7 +1,7 @@
 import { type Preview, setup } from '@storybook/vue3'
 import { createVuestic } from 'vuestic-ui'
 import { plugin as formkitPlugin, defaultConfig as formkitConfig } from '@formkit/vue'
-import * as types from '../src'
+import * as inputs from '../src'
 import 'vuestic-ui/css'
 import 'vuestic-ui/styles/essential.css'
 import 'vuestic-ui/styles/typography.css'
@@ -11,7 +11,7 @@ import './tailwind.css'
 setup((app) => {
   app.use(createVuestic())
   app.use(formkitPlugin, formkitConfig({
-    inputs: types
+    inputs
   }))
 })
-Original file line number
+Diff line change
@@ Expand Up / @@ -185,6 +185,7 @@ export default defineNuxtConfig({ @@
       },
       formkit: {
+        defaultConfig: false,
         autoImport: true,
       },
@@ Expand Down @@