andrew-boyd
Repos
10
Followers
44
Following
16

🍳 A system of Sass functions and mixins with an accompanying visual grid overlay to help you be exact with your front-end development. Cook up something delicious.

57
5

⚡️ The easiest way to build forms with Vue.

2169
243

Documentation site for vue-formulate, available at vueformulate.com

11
51

Open source website for the beCamp unconference in Charlottesville, VA

16
7

Events

adds localized strings for next and previous in multi-step action buttons

Created at 16 hours ago

simplify step examples for multi-step guide

Created at 17 hours ago

adds section keys diagram and data table

Created at 17 hours ago

adjust plugin introductory sentence

Created at 18 hours ago

adds conclusion CTA to laravel guide

Created at 18 hours ago

adds for code examples

Created at 18 hours ago

copy edits for laravel guide

Created at 18 hours ago
issue comment
Multi-step plugin for @formkit/addons

@GustavoFenilli @justin-schroeder first draft of the docs for this can be seen here: https://formkit-q21ga1q2y-formkit.vercel.app/plugins/multi-step

Created at 1 day ago
create branch
andrew-boyd create branch feature/multistep-plugin
Created at 1 day ago

adds @formkit/inputs as a dependency of @formkit/addons

Created at 1 day ago
pull request opened
Multi-step plugin for @formkit/addons

Going to switch my attention to the docs but would love for someone else to try using this and see how it feels as an end-user.

Basic usage

// formkit.config.js
import { defaultConfig } from '@formkit/vue'
import { createMultiStepPlugin } from '@formkit/addons'
import '@formkit/addons/css/multistep.css'

const config = defaultConfig({
  theme: 'genesis', 
  plugins: [createMultiStepPlugin()],
})

export default config
// myComponent.vue
<template>
  <FormKit type="form">
    <FormKit type="multi-step">

      <FormKit type="step" name="personalInfo">
        <FormKit
          type="text"
          label="My Name"
          prefix-icon="avatarMan"
          validation="required"
        />
      </FormKit>
    
      <FormKit type="step" name="references">
        <FormKit
          type="textarea"
          label="Please supply 2 references"
          validation="required"
        />
      </FormKit>

      <FormKit type="step" name="Supplemental">
        <FormKit
          type="textarea"
          label="Why do you want to work here?"
          validation="required"
        />
        <FormKit
          type="radio"
          label="How did you hear about us"
          validation="required"
          :options="[
            { label: 'Google', value: 'google' },
            { label: 'Facebook', value: 'facebook' },
            { label: 'Twitter', value: 'twitter' },
            { label: 'Friend', value: 'friend' },
          ]"
        />

        <!-- example of providing a submit button on the last step -->
        <template #stepNext>
          <FormKit type="submit" />
        </template>
      </FormKit>

    </FormKit><!-- multi-step -->
  </FormKit><!-- form -->
</template>

You should end up with something that looks like this to start: Screenshot 2023-01-31 at 12 02 04 PM

Created at 1 day ago

include importable CSS as part of build process

Created at 1 day ago

improvements to multi-step styling and prop behavior

tests to ensure multistep and step components mount and have expected behaviors

Created at 1 day ago
create branch
andrew-boyd create branch feature/multistep-plugin
Created at 2 days ago
issue comment
Cannot find module '@formkit/themes/tailwindcss/genesis'

image

Despite the TypeScript warning, worked just fine. Thanks for the great job.

Does this error persist if you restart VSCode's typescript server?

Created at 2 days ago

fix typo in docs

Created at 2 days ago
issue comment
Cannot find module '@formkit/themes/tailwindcss/genesis'

@vctrtvfrrr /dist/ no longer required in the path for the @next tag. try import genesis from "@formkit/themes/tailwindcss/genesis";

Created at 2 days ago

add warning in docs about beta.14 import of genesis for Tailwind

Created at 2 days ago
issue comment
Cannot find module '@formkit/themes/tailwindcss/genesis'

This has been published under the @next tag

Created at 2 days ago
issue comment
Cannot find module '@formkit/themes/tailwindcss/genesis'

@aerophobic @michelveloso can you try 1.0.0-beta.15-3995886 which can be installed with the @dev tag? Should be working. I'll publish it under the @next tag shortly.

Created at 2 days ago
issue comment
uses `addComponent` to include built-in FormKit components

Nuxt 3.1.1 includes a fix for this issue on their end: https://github.com/nuxt/nuxt/pull/18494

Not sure if there's benefit to the included addComponent calls now.

Created at 1 week ago
issue comment
Nuxt 3.1 hydration missmatch.

Ah really? Just worked around it with #563. 😄

Created at 1 week ago
issue comment
uses `addComponent` to include `FormKit` and `FormKitSchema` to the...

Ok, so tried doing a FormKitSchema without it being in the plugin and without an import, and it renderers client side with a hydration error warning. It does not throw the server error if you manually write an import in the file you're using it in as you mentioned earlier, @justin-schroeder.

I'm adding all 4 components that the @formkit/vue package exports at the moment so that things are rendered via SSR successfully without the Nuxt user needing to write a manual import statement.

  • FormKit
  • FormKitSchema
  • FormKitMessages
  • FormKitIcon
Created at 1 week ago

adds FormKitMessages and FormKitIcon to pre-registered nuxt components

Created at 1 week ago

fixes import

Created at 1 week ago
issue comment
uses `addComponent` to include `FormKit` and `FormKitSchema` to the...

Whoops — tried to clean out the prettier formatting but I also nixed the import.

Created at 1 week ago
pull request opened
uses `addComponent` to include `FormKit` and `FormKitSchema` to the...

known components in Nuxt.

If one of you fine gentlemen could try this locally with npx formkit create-app and confirm you don't get any SSR hydration issues on a hard reload I would appreciate it!

Created at 1 week ago
create branch
andrew-boyd create branch feature/nuxt-3-1-ssr
Created at 1 week ago