{{ value }}
+ {{ value }}
+ + *All the contents of this form are fictional (the company, grant, and form) + for the purposes of demonstrating the capabilities of FormKit. +
+ + + + + diff --git a/packages/docs/page-config/extensions/formkit/examples/useSteps.js b/packages/docs/page-config/extensions/formkit/examples/useSteps.js new file mode 100644 index 0000000000..2be132b500 --- /dev/null +++ b/packages/docs/page-config/extensions/formkit/examples/useSteps.js @@ -0,0 +1,69 @@ +import { reactive, toRef, ref, watch } from 'vue' +import { getNode, createMessage } from '@formkit/core' + +export default function useSteps () { + const activeStep = ref('') + const steps = reactive({}) + const visitedSteps = ref([]) // track visited steps + + // NEW: watch our activeStep and store visited steps + // to know when to show errors + watch(activeStep, (newStep, oldStep) => { + if (oldStep && !visitedSteps.value.includes(oldStep)) { + visitedSteps.value.push(oldStep) + } + // NEW: trigger showing validation on fields + // within all visited steps + visitedSteps.value.forEach((step) => { + const node = getNode(step) + node.walk((n) => { + n.store.set( + createMessage({ + key: 'submitted', + value: true, + visible: false, + }) + ) + }) + }) + }) + + const setStep = (delta) => { + const stepNames = Object.keys(steps) + const currentIndex = stepNames.indexOf(activeStep.value) + activeStep.value = stepNames[currentIndex + delta] + } + + const stepPlugin = (node) => { + if (node.props.type === "group") { + // builds an object of the top-level groups + steps[node.name] = steps[node.name] || {} + + node.on('created', () => { + // use 'on created' to ensure context object is available + steps[node.name].valid = toRef(node.context.state, 'valid') + }) + + // listen for changes in error count and store it + node.on('count:errors', ({ payload: count }) => { + steps[node.name].errorCount = count + }) + + // listen for changes in count of blocking validations messages + node.on('count:blocking', ({ payload: count }) => { + steps[node.name].blockingCount = count + }) + + // set the active tab to the 1st tab + if (activeStep.value === '') { + activeStep.value = node.name + } + + // Stop plugin inheritance to descendant nodes + return false + } + } + + // NEW: include visitedSteps in our return + return { activeStep, visitedSteps, steps, stepPlugin, setStep } +} diff --git a/packages/docs/page-config/extensions/formkit/examples/utils.js b/packages/docs/page-config/extensions/formkit/examples/utils.js new file mode 100644 index 0000000000..b4754cfa3b --- /dev/null +++ b/packages/docs/page-config/extensions/formkit/examples/utils.js @@ -0,0 +1,32 @@ +export { axios, camel2title } + +// This is just a mock of an actual axios instance. +const axios = { + post: (formData) => { + return new Promise((resolve, reject) => { + let response = { status: 200 } + if (formData.organizationInfo.org_name.toLowerCase().trim() !== 'formkit') { + response = { + status: 400, + formErrors: ['There was an error in this form, please correct and re-submit to validate.'], + fieldErrors: { + 'organizationInfo.org_name': 'Organization Name must be "FormKit", we tricked you!' + } + } + } + setTimeout(() => { + if (response.status === 200) { + resolve(response) + } else { + reject(response) + } + }, 1500) + }) + + } +} + +const camel2title = (str) => str + .replace(/([A-Z])/g, (match) => ` ${match}`) + .replace(/^./, (match) => match.toUpperCase()) + .trim() diff --git a/packages/docs/page-config/extensions/formkit/index.ts b/packages/docs/page-config/extensions/formkit/index.ts new file mode 100644 index 0000000000..50fcf258ad --- /dev/null +++ b/packages/docs/page-config/extensions/formkit/index.ts @@ -0,0 +1,44 @@ +const installCommandObject = { + npm: "npm install @vuestic/formkit", + yarn: "yarn add @vuestic/formkit", +}; + + +const setupCode = ` +// main.* +import { createApp } from 'vue' +import App from './App.vue' + +import { plugin, defaultConfig } from '@formkit/vue' + +createApp(App).use(plugin, defaultConfig).use(createVuestic()).mount('#app') +`; + +const dependencies = { + "@vuestic/formkit": "latest", +}; + +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]]. 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.alert("Vuestic-UI provides styles for FormKit components and doesn't change any functionality. For more examples visit the official [FormKit documentation page](https://formkit.com/guides/build-a-multi-step-form)[[target=_blank]].", "warning"), + block.example("Checkbox", { + codesandboxConfig: { dependencies }, + title: "Checkbox", + }), + block.example("BasicForm", { + codesandboxConfig: { dependencies }, + title: "Basic Form", + }), + block.example("MultiStepForm", { + codesandboxConfig: { dependencies }, + title: "Multi Step Form", + }), + ], +}); diff --git a/packages/docs/page-config/navigationRoutes.ts b/packages/docs/page-config/navigationRoutes.ts index aa80c26980..4a3460b981 100644 --- a/packages/docs/page-config/navigationRoutes.ts +++ b/packages/docs/page-config/navigationRoutes.ts @@ -651,6 +651,10 @@ export const navigationRoutes: NavigationRoute[] = [ meta: { badge: navigationBadge.new('1.9.9'), } + }, + { + name: 'formkit', + displayName: 'FormKit integration', } ], }, diff --git a/packages/formkit/package.json b/packages/formkit/package.json index 5e86b830eb..552ec2cec6 100644 --- a/packages/formkit/package.json +++ b/packages/formkit/package.json @@ -1,7 +1,8 @@ { "name": "@vuestic/formkit", "version": "0.0.1", - "main": "dist/index.js", + "main": "src/index.ts", + "types": "src/index.ts", "license": "MIT", "dependencies": { "@formkit/core": "^1.6.7", diff --git a/packages/formkit/playground/src/App.vue b/packages/formkit/playground/src/App.vue index 338fac448b..cb69581423 100644 --- a/packages/formkit/playground/src/App.vue +++ b/packages/formkit/playground/src/App.vue @@ -1,9 +1,9 @@