feat: adds new didMount state and mounted event

Author: justin-schroeder

packages/vue/__tests__/inputs/text.spec.ts

@@ -294,4 +294,21 @@ describe('the number feature', () => {
     const node = getNode(id)!
     expect(node.value).toBe(12345)
   })
+  it('knows when it is mounted', async () => {
+    const wrapper = mount(FormKit, {
+      props: {
+        type: 'text',
+        help: 'what happens next?',
+        sectionsSchema: {
+          help: {
+            children: '$didMount && "Mounted" || "Not mounted"',
+          },
+        },
+      },
+      ...global,
+    })
+    expect(wrapper.find('.formkit-help').text()).toBe('Not mounted')
+    await nextTick()
+    expect(wrapper.find('.formkit-help').text()).toBe('Mounted')
+  })
 })

packages/vue/src/FormKit.ts

@@ -153,12 +153,25 @@ function FormKit<Props extends FormKitInputs<Props>>(
     ...definitionLibrary,
   }
 
+  /**
+   * Emit the mounted event.
+   */
+  function didMount() {
+    node.emit('mounted')
+  }
+
   // // Expose the FormKitNode to template refs.
   context.expose({ node })
   return () =>
     h(
       FormKitSchema,
-      { schema: schema.value, data: node.context, library, memoKey },
+      {
+        schema: schema.value,
+        data: node.context,
+        onMounted: didMount,
+        library,
+        memoKey,
+      },
       { ...context.slots }
     )
 }

packages/vue/src/FormKitSchema.ts

@@ -18,6 +18,7 @@ import {
   ConcreteComponent,
   onUnmounted,
   markRaw,
+  onMounted,
 } from 'vue'
 import { has, isPojo } from '@formkit/utils'
 import {
@@ -883,6 +884,7 @@ export const FormKitSchema = /* #__PURE__ */ defineComponent({
       required: false,
     },
   },
+  emits: ['mounted'],
   setup(props, context) {
     const instance = getCurrentInstance()
     let instanceKey = {}
@@ -939,6 +941,8 @@ export const FormKitSchema = /* #__PURE__ */ defineComponent({
       /* eslint-enable @typescript-eslint/no-non-null-assertion */
     }
 
+    // When the component is mounted, emit the mounted event
+    onMounted(() => context.emit('mounted'))
     // For browser rendering:
     onUnmounted(cleanUp)
     // For SSR rendering:

packages/vue/src/bindings.ts

@@ -277,6 +277,7 @@ const vueBindings: FormKitPlugin = function vueBindings(node) {
     items,
     label: node.props.label,
     messages,
+    didMount: false,
     node: markRaw(node),
     options: node.props.options,
     defaultMessagePlacement: true,
@@ -317,6 +318,13 @@ const vueBindings: FormKitPlugin = function vueBindings(node) {
     })()
   })
 
+  /**
+   * When the node mounts, set the didMount flag.
+   */
+  node.on('mounted', () => {
+    context.didMount = true
+  })
+
   /**
    * Sets the settled state.
    */