chore: example cleanup

Author: andrew-boyd

_examples/list/list.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue'
 const list = ref([
   '[email protected]',
   '[email protected]',
+  '[email protected]'
 ])
 </script>
 

_examples/multi-step/before-step-change/before-step-change.vue

@@ -7,7 +7,6 @@ const stepInformation = ref({})
   <!-- %partial% -->
   <FormKit
     type="multi-step"
-    :disabled="disabled"
     :before-step-change="
       ({ currentStep, targetStep, delta }) => {
         stepInformation.value = {

_examples/taglist/taglist-max.vue

@@ -6,10 +6,12 @@ import countries from '@content/_examples/_data/countries.js'
   <FormKit type="form" #default="{ value }" :actions="false">
     <FormKit
       type="taglist"
+      name="taglist"
       label="Taglist with max prop set to 2"
       :options="countries"
       popover
       max="2"
     />
+    <pre wrap>{{ value }}</pre>
   </FormKit>
 </template>

_examples/taglist/taglist-open-on-click.vue

@@ -3,13 +3,16 @@ import countries from '@content/_examples/_data/countries.js'
 </script>
 
 <template>
-  <FormKit
-    type="taglist"
-    name="country"
-    label="Search for a country"
-    placeholder="Example: United States"
-    :options="countries"
-    popover
-    open-on-click
-  />
+  <FormKit type="form" #default="{ value }" :actions="false">
+    <FormKit
+      type="taglist"
+      name="country"
+      label="Search for a country"
+      placeholder="Example: United States"
+      :options="countries"
+      popover
+      open-on-click
+    />
+    <pre wrap>{{ value }}</pre>
+  </FormKit>
 </template>

_examples/taglist/taglist-open-on-focus.vue

@@ -12,7 +12,7 @@ function focusTaglist() {
 </script>
 
 <template>
-  <div>
+  <FormKit type="form" #default="{ value }" :actions="false">
     <FormKit type="button" @click="focusTaglist"
       >Click me to focus taglist</FormKit
     >
@@ -27,7 +27,6 @@ function focusTaglist() {
       popover
       open-on-focus
     />
-  </div>
+    <pre wrap>{{ value }}</pre>
+  </FormKit>
 </template>
-
-<style scoped></style>

_examples/taglist/taglist-open-on-remove.vue

@@ -3,15 +3,17 @@ import countries from '@content/_examples/_data/countries.js'
 </script>
 
 <template>
-  <FormKit
-    type="taglist"
-    name="country"
-    label="Search for a country"
-    placeholder="Example: United States"
-    :options="countries"
-    open-on-remove
-    popover
-    :value="['US']"
-  />
-  <pre wrap>{{ value }}</pre>
+  <FormKit type="form" #default="{ value }" :actions="false">
+    <FormKit
+      type="taglist"
+      name="country"
+      label="Search for a country"
+      placeholder="Example: United States"
+      :options="countries"
+      open-on-remove
+      popover
+      :value="['US']"
+    />
+    <pre wrap>{{ value }}</pre>
+  </FormKit>
 </template>

_examples/taglist/taglist-reload-on-commit.vue

@@ -3,14 +3,17 @@ import countries from '@content/_examples/_data/countries.js'
 </script>
 
 <template>
-  <FormKit
-    type="taglist"
-    name="country"
-    label="Search for a country"
-    placeholder="Example: United States"
-    popover
-    :options="countries"
-    :reload-on-commit="true"
-    :close-on-select="false"
-  />
+  <FormKit type="form" #default="{ value }" :actions="false">
+    <FormKit
+      type="taglist"
+      name="country"
+      label="Search for a country"
+      placeholder="Example: United States"
+      popover
+      :options="countries"
+      :reload-on-commit="true"
+      :close-on-select="false"
+    />
+    <pre wrap>{{ value }}</pre>
+  </FormKit>
 </template>