fix: remove column layout from multi-step examples and misc fixes

- Remove layout: "column" from multi-step plugin examples
- Change code blocks from 'text' to 'bash' in export guide
- Remove outdated Laravel 10 integration guide

Author: andrew-boyd

1.getting-started/3.your-first-form.md

@@ -203,8 +203,8 @@ The <code>at</code> function uses the <code>name</code> attribute instead of the
 ---
 name: "Refactor as a plugin"
 file: [
-  '_examples/guides/your-first-form/character-plugin/example.vue',
-  '_examples/guides/your-first-form/character-plugin/plugins.js',
+  "_examples/guides/your-first-form/character-plugin/example.vue",
+  "_examples/guides/your-first-form/character-plugin/plugins.js",
 ]
 init-file-tab: "example.vue"
 ---
@@ -226,9 +226,9 @@ By default, the <code>group</code> type does not output any markup, so to show v
 ---
 name: "Adding custom rule to group"
 file: [
-  '_examples/guides/your-first-form/character-group-rule/example.vue',
-  '_examples/guides/your-first-form/character-group-rule/plugins.js',
-  '_examples/guides/your-first-form/character-group-rule/rules.js',
+  "_examples/guides/your-first-form/character-group-rule/example.vue",
+  "_examples/guides/your-first-form/character-group-rule/plugins.js",
+  "_examples/guides/your-first-form/character-group-rule/rules.js",
 ]
 init-file-tab: "example.vue"
 ---
@@ -255,9 +255,9 @@ So, let's grab the context object of the `group` input and extract the `value`:
 ---
 name: "Conditional rendering"
 file: [
-  '_examples/guides/your-first-form/character-easter-egg/example.vue',
-  '_examples/guides/your-first-form/character-easter-egg/plugins.js',
-  '_examples/guides/your-first-form/character-easter-egg/rules.js',
+  "_examples/guides/your-first-form/character-easter-egg/example.vue",
+  "_examples/guides/your-first-form/character-easter-egg/plugins.js",
+  "_examples/guides/your-first-form/character-easter-egg/rules.js",
 ]
 init-file-tab: "example.vue"
 ---

2.essentials/1.inputs.md

@@ -20,7 +20,7 @@ FormKit Inputs are not confined to what is available in "native" HTML. Our seper
 ---
   name: "Text input"
   file: [
-    '_examples/single-component/single-component-pro.vue',
+    "_examples/single-component/single-component-pro.vue",
   ]
 ---
 ::

2.essentials/4.styling.md

@@ -228,8 +228,8 @@ The `generateClasses` function takes a javascript object keyed by input type wit
 ---
 name: "generateClasses example"
 file: [
-'_examples/generate-classes/generate-classes.vue',
-'_examples/generate-classes/formkit.config.ts'
+  "_examples/generate-classes/generate-classes.vue",
+  "_examples/generate-classes/formkit.config.ts"
 ]
 init-file-tab: "formkit.config.ts"
 render: "html"

2.essentials/5.icons.md

@@ -241,8 +241,8 @@ Below is an implementation of FormKit loading icons from FontAwesome by replacin
 name: "FontAwesome Icons"
 init-file-tab: "formkit.config.ts"
 file: [
-  '_examples/icons/font-awesome/font-awesome.vue',
-  '_examples/icons/font-awesome/formkit.config.ts'
+  "_examples/icons/font-awesome/font-awesome.vue",
+  "_examples/icons/font-awesome/formkit.config.ts"
 ]
 ---
 ::
@@ -256,8 +256,8 @@ Below is an implementation of FormKit with a fully custom `iconLoader` that fetc
 name: "Heroicons Icons"
 init-file-tab: "formkit.config.ts"
 file: [
-  '_examples/icons/heroicons/heroicons.vue',
-  '_examples/icons/heroicons/formkit.config.ts'
+  "_examples/icons/heroicons/heroicons.vue",
+  "_examples/icons/heroicons/formkit.config.ts"
 ]
 ---
 ::

2.essentials/6.internationalization.md

@@ -112,8 +112,8 @@ You can change the locale of all FormKit inputs by using the `changeLocale` comp
 ---
   name: "Changing locale"
   file: [
-    '_examples/locale-change-2/change-locale-2.vue',
-    '_examples/locale-change-2/formkit.config.ts'
+    "_examples/locale-change-2/change-locale-2.vue",
+    "_examples/locale-change-2/formkit.config.ts"
   ]
 ---
 ::
@@ -126,8 +126,8 @@ When using the composition API, you won’t have access to `this.$formkit`. Inst
 ---
   name: "Changing locale via config"
   file: [
-    '_examples/locale-change-config/locale-change-config.vue',
-    '_examples/locale-change-config/formkit.config.ts'
+    "_examples/locale-change-config/locale-change-config.vue",
+    "_examples/locale-change-config/formkit.config.ts"
   ]
 ---
 ::

2.essentials/7.custom-inputs.md

@@ -111,8 +111,8 @@ Now that we’ve defined our input we can use it anywhere in the application:
 ---
 name: "Custom input"
 file: [
-  '_examples/custom-input-default-config/custom-input-default-config.vue',
-  '_examples/custom-input-default-config/formkit.config.ts'
+  "_examples/custom-input-default-config/custom-input-default-config.vue",
+  "_examples/custom-input-default-config/formkit.config.ts"
 ]
 ---
 ::

2.essentials/9.configuration.md

@@ -176,8 +176,8 @@ When registering the `@formkit/vue` plugin (or using `@formkit/nuxt` with a `for
 ---
   name: "Component props"
   file: [
-    '_examples/vue-plugin-props/vue-plugin-props.vue',
-    '_examples/vue-plugin-props/formkit.config.ts',
+    "_examples/vue-plugin-props/vue-plugin-props.vue",
+    "_examples/vue-plugin-props/formkit.config.ts",
   ]
   init-file-tab: "formkit.config.ts"
 ---

3.inputs/list.md

@@ -54,7 +54,7 @@ Static lists are the simplest type of list to create. Wrap any inputs in a `<For
 name: "Simple static list"
 file: [
   "_examples/list/list-static.vue",
-  '_examples/_data/nba-top-players.js'
+  "_examples/_data/nba-top-players.js"
 ]
 ---
 ::

3.inputs/mask.md

@@ -199,7 +199,7 @@ To register your mask tokens globally, extend the `config` property of your glob
 ::Example
 ---
 name: "Mask input global"
-file: ['_examples/mask/tokens-global.vue', '_examples/mask/formkit.config.ts']
+file: ["_examples/mask/tokens-global.vue", "_examples/mask/formkit.config.ts"]
 init-file-tab: "formkit.config.ts"
 ---
 ::

3.inputs/transfer-list.md

@@ -28,9 +28,9 @@ The transfer list input is ideal for situations where the end-user needs to sele
 name: "Transfer List"
 layout: "column"
 file: [
-  '_examples/transfer-list/transfer-list-full-example.vue',
-  '_examples/transfer-list/api.js',
-  '_examples/transfer-list/utils.js'
+  "_examples/transfer-list/transfer-list-full-example.vue",
+  "_examples/transfer-list/api.js",
+  "_examples/transfer-list/utils.js"
 ]
 ---
 ::
@@ -92,8 +92,8 @@ Let's go ahead and populate the transfer list's options with a list of guest nam
 name: "Transfer List"
 layout: "column"
 file: [
-  '_examples/transfer-list/transfer-list-options.vue',
-  '_examples/transfer-list/guests.js'
+  "_examples/transfer-list/transfer-list-options.vue",
+  "_examples/transfer-list/guests.js"
 ]
 ---
 ::
@@ -107,8 +107,8 @@ The _value_ of the transfer list input is an array. Selected option values from
 name: "Transfer List"
 layout: "column"
 file: [
-  '_examples/transfer-list/transfer-list-values.vue',
-  '_examples/transfer-list/guests.js'
+  "_examples/transfer-list/transfer-list-values.vue",
+  "_examples/transfer-list/guests.js"
 ]
 ---
 ::
@@ -122,8 +122,8 @@ The transfer list input can be pre-populated with values by setting the `value`
 name: "Transfer List"
 layout: "column"
 file: [
-  '_examples/transfer-list/transfer-list-initial-values.vue',
-  '_examples/transfer-list/guests.js'
+  "_examples/transfer-list/transfer-list-initial-values.vue",
+  "_examples/transfer-list/guests.js"
 ]
 ---
 ::
@@ -137,8 +137,8 @@ The transfer list input can be made searchable by setting the `searchable` prop.
 name: "Transfer List"
 layout: "column"
 file: [
-  '_examples/transfer-list/transfer-list-searchable.vue',
-  '_examples/transfer-list/guests.js'
+  "_examples/transfer-list/transfer-list-searchable.vue",
+  "_examples/transfer-list/guests.js"
 ]
 ---
 ::
@@ -161,8 +161,8 @@ The transfer list input will filter options with its own internal search functio
 name: "Taglist"
 layout: "column"
 file: [
-  '_examples/transfer-list/transfer-list-filter.vue',
-  '_examples/transfer-list/guests.js'
+  "_examples/transfer-list/transfer-list-filter.vue",
+  "_examples/transfer-list/guests.js"
 ]
 ---
 ::
@@ -180,8 +180,8 @@ The transfer list input can be limited to a maximum number of selected values by
 name: "Transfer List"
 layout: "column"
 file: [
-  '_examples/transfer-list/transfer-list-max.vue',
-  '_examples/transfer-list/guests.js'
+  "_examples/transfer-list/transfer-list-max.vue",
+  "_examples/transfer-list/guests.js"
 ]
 ---
 ::
@@ -195,8 +195,8 @@ By default, the transfer list input will add or remove options on click. You can
 name: "Transfer List"
 layout: "column"
 file: [
-  '_examples/transfer-list/transfer-list-transfer-on-select.vue',
-  '_examples/transfer-list/guests.js'
+  "_examples/transfer-list/transfer-list-transfer-on-select.vue",
+  "_examples/transfer-list/guests.js"
 ]
 ---
 ::
@@ -212,8 +212,8 @@ Here we have a transfer list input that loads its options from an asynchronous f
 name: "Transfer List"
 layout: "column"
 file: [
-  '_examples/transfer-list/transfer-list-async-options.vue',
-  '_examples/transfer-list/api.js'
+  "_examples/transfer-list/transfer-list-async-options.vue",
+  "_examples/transfer-list/api.js"
 ]
 ---
 ::
@@ -229,8 +229,8 @@ When assigning the options prop to an asynchronous function, the function will b
 name: "Transfer List"
 layout: "column"
 file: [
-  '_examples/transfer-list/transfer-list-async-options-pagination.vue',
-  '_examples/transfer-list/api.js'
+  "_examples/transfer-list/transfer-list-async-options-pagination.vue",
+  "_examples/transfer-list/api.js"
 ]
 ---
 ::
@@ -244,8 +244,8 @@ The transfer list input can also load options asynchronously when the user searc
 name: "Transfer List"
 layout: "column"
 file: [
-  '_examples/transfer-list/transfer-list-async-options-search.vue',
-  '_examples/transfer-list/api.js'
+  "_examples/transfer-list/transfer-list-async-options-search.vue",
+  "_examples/transfer-list/api.js"
 ]
 ---
 ::
@@ -261,8 +261,8 @@ The transfer list input also provides an `optionLoader` prop that allows you to
 name: "Transfer List"
 layout: "column"
 file: [
-  '_examples/transfer-list/transfer-list-rehydrating-values.vue',
-  '_examples/transfer-list/api.js'
+  "_examples/transfer-list/transfer-list-rehydrating-values.vue",
+  "_examples/transfer-list/api.js"
 ]
 ---
 ::
@@ -278,8 +278,8 @@ You can also use use the `optionLoader` to fetch additional data on selected val
 name: "Transfer List"
 layout: "column"
 file: [
-  '_examples/transfer-list/transfer-list-additional-data.vue',
-  '_examples/transfer-list/api.js'
+  "_examples/transfer-list/transfer-list-additional-data.vue",
+  "_examples/transfer-list/api.js"
 ]
 ---
 ::
@@ -297,9 +297,9 @@ Now that we are loading additional data on selected values (the age and email ad
 name: "Transfer List"
 layout: "column"
 file: [
-  '_examples/transfer-list/transfer-list-options-slot.vue',
-  '_examples/transfer-list/api.js',
-  '_examples/transfer-list/utils.js'
+  "_examples/transfer-list/transfer-list-options-slot.vue",
+  "_examples/transfer-list/api.js",
+  "_examples/transfer-list/utils.js"
 ]
 ---
 ::
@@ -315,9 +315,9 @@ The transfer list input can be used to create a ranked list, let's do that with
 name: "Transfer List"
 layout: "column"
 file: [
-  '_examples/transfer-list/transfer-list-ranking.vue',
-  '_examples/_data/nba-top-players.js',
-  '_examples/transfer-list/utils.js'
+  "_examples/transfer-list/transfer-list-ranking.vue",
+  "_examples/_data/nba-top-players.js",
+  "_examples/transfer-list/utils.js"
 ]
 ---
 ::