chore: content updates

Author: andrew-boyd

2.essentials/8.schema.md

@@ -70,8 +70,6 @@ Notice in the above example that the <code>style</code> attribute is unique in t
 Components can be defined with the `$cmp` property. The `$cmp` property should be a string that references a globally defined component or a component passed
 into `FormKitSchema` with the `library` prop:
 
-<!-- TODO: determine why schema component is not rendering in example -->
-
 ::Example
 ---
 name: "Schema - components"

_examples/checkbox-objects/checkbox-objects.vue

@@ -1,10 +1,6 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 const value = ref([])
-const sum = computed(() => {
-  return new Intl.NumberFormat('en-US')
-    .format(value.value.reduce((sum, price) => Number(price) + sum, 0))
-})
 </script>
 
 <template>
@@ -23,7 +19,7 @@ const sum = computed(() => {
         value: 'item-55',
         label: 'Vada Pav (out of stock)',
         help: 'Fried vegetarian dumplings.',
-        attrs: { disabled: true }
+        attrs: { disabled: true },
       },
       {
         value: 'item-22',
@@ -34,7 +30,7 @@ const sum = computed(() => {
         value: 'item-44',
         label: 'Halwa',
         help: 'Pudding made with flour.',
-      }
+      },
     ]"
     help="Select your favorite Indian dishes."
   />

_examples/dropdown/dropdown-selection-slot.vue

@@ -1,5 +1,30 @@
 <script setup>
-const frameworks = [{ label: 'React', value: 'react', asset: 'https://s3.amazonaws.com/cdn.formk.it/example-assets/frontend-framework-logos/react-logo.png'}, { label: 'Vue', value: 'vue', asset: 'https://s3.amazonaws.com/cdn.formk.it/example-assets/frontend-framework-logos/vue-logo.png'}, { label: 'Angular', value: 'angular', asset: 'https://s3.amazonaws.com/cdn.formk.it/example-assets/frontend-framework-logos/angular-logo.png',}, { label: 'Svelte', value: 'svelte', asset: 'https://s3.amazonaws.com/cdn.formk.it/example-assets/frontend-framework-logos/svelte-logo.png'}]
+const frameworks = [
+  {
+    label: 'React',
+    value: 'react',
+    asset:
+      'https://s3.amazonaws.com/cdn.formk.it/example-assets/frontend-framework-logos/react-logo.png',
+  },
+  {
+    label: 'Vue',
+    value: 'vue',
+    asset:
+      'https://s3.amazonaws.com/cdn.formk.it/example-assets/frontend-framework-logos/vue-logo.png',
+  },
+  {
+    label: 'Angular',
+    value: 'angular',
+    asset:
+      'https://s3.amazonaws.com/cdn.formk.it/example-assets/frontend-framework-logos/angular-logo.png',
+  },
+  {
+    label: 'Svelte',
+    value: 'svelte',
+    asset:
+      'https://s3.amazonaws.com/cdn.formk.it/example-assets/frontend-framework-logos/svelte-logo.png',
+  },
+]
 </script>
 
 <template>
@@ -13,16 +38,17 @@ const frameworks = [{ label: 'React', value: 'react', asset: 'https://s3.amazona
     value="vue"
   >
     <!--SELECTION SLOT-->
-    <template #selection="{ option }">
+    <template #selection="{ option, classes }">
       <div class="flex items-center">
         <img :src="option.asset" alt="optionAvatar" class="w-5 mr-2" />
-        <span>
+        <span :class="classes.selection">
           {{ option.label }}
         </span>
       </div>
     </template>
     <!---->
   </FormKit>
+
   <FormKit
     type="dropdown"
     name="framework"
@@ -40,11 +66,11 @@ const frameworks = [{ label: 'React', value: 'react', asset: 'https://s3.amazona
         <span :class="classes.tagLabel">
           {{ option.label }}
         </span>
-        <button
+        <span
           @click.prevent="handlers.removeSelection(option)()"
           tabindex="-1"
           type="button"
-          aria-controls="input_1"
+          role="button"
           :class="classes.removeSelection"
         >
           <span :class="`${classes.closeIcon} ${classes.icon}`"
@@ -59,9 +85,9 @@ const frameworks = [{ label: 'React', value: 'react', asset: 'https://s3.amazona
               ></path>
             </svg>
           </span>
-        </button>
+        </span>
       </div>
     </template>
     <!--/TAG SLOT-->
   </FormKit>
-</template>s
+</template>

_examples/repeater/repeater-controls.vue

@@ -31,9 +31,11 @@ import {
     </FormKit>
     <table>
       <thead>
-        <th>Add</th>
-        <th>Modify</th>
-        <th>Remove</th>
+        <tr>
+          <th>Add</th>
+          <th>Modify</th>
+          <th>Remove</th>
+        </tr>
       </thead>
       <tbody>
         <tr>

_examples/reset-form/reset-form.vue

@@ -11,14 +11,14 @@ export default {
       // Our api request:
       await new Promise((r) => setTimeout(r, 1000))
       this.complete = true
-      this.$formkit.reset('myForm')
+      this.$formkit.reset('newsletterForm')
     },
   },
 }
 </script>
 
 <template>
-  <FormKit type="form" id="myForm" @submit="handleSubmit">
+  <FormKit type="form" id="newsletterForm" @submit="handleSubmit">
     <h2 class="text-xl font-bold mb-2">Newsletter</h2>
     <p class="text-base mb-4">When this form is submitted the form is reset.</p>
     <div class="success" v-if="complete">Submitted successfully!</div>

_install/pro-quick-install.md

@@ -1,13 +1,13 @@
 ```js
-import { createProPlugin, datepicker, mask } from '@formkit/pro'
+import { defineFormKitConfig } from '@formkit/vue'
+import { createProPlugin, datepicker } from '@formkit/pro'
 
-const proPlugin = createProPlugin('fk-#########', {
+const proPlugin = createProPlugin('fk-############', {
   datepicker, 
-  mask,
   // any other Pro Inputs
 })
 
-const config = defaultConfig({
+export default defineFormKitConfig({
   plugins: [proPlugin],
 })
 ```

_install/pro-quick-use.md

@@ -1,4 +1,3 @@
 ```html
 <FormKit type="datepicker" /> 
-<FormKit type="mask" />
 ```