feat: reworks all formkit examples to account for new Regenisis theme

Author: andrew-boyd

.examples/_no-tailwind/formkit.config.js

@@ -0,0 +1,8 @@
+import { genesisIcons } from '@formkit/icons'
+
+export default {
+  theme: 'genesis', // legacy genesis CSS theme
+  icons: {
+    ...genesisIcons,
+  },
+}

.examples/auto-animate/formkit.config.js

@@ -1,7 +1,15 @@
+import { genesisIcons } from "@formkit/icons"
+import { rootClasses } from './formkit.theme.js'
 import { createAutoAnimatePlugin } from '@formkit/addons'
 
 export default {
   plugins: [
     createAutoAnimatePlugin()
-  ]
-}
+  ],
+  icons: {
+    ...genesisIcons
+  },
+  config: {
+    rootClasses
+  }
+}

.examples/auto-height-textarea/formkit.config.js

@@ -1,11 +1,15 @@
-// formkit.config.js
-import { defaultConfig } from '@formkit/vue'
+import { genesisIcons } from "@formkit/icons"
+import { rootClasses } from './formkit.theme.js'
 import { createAutoHeightTextareaPlugin } from '@formkit/addons'
 
-const config = defaultConfig({
+export default {
   plugins: [
     createAutoHeightTextareaPlugin(),
   ],
-})
-
-export default config
+  icons: {
+    ...genesisIcons
+  },
+  config: {
+    rootClasses
+  }
+}

.examples/autocomplete-pro/autocomplete-full.vue

@@ -39,20 +39,22 @@ async function searchMovies({ search, page, hasNextPage }) {
       :options="searchMovies"
       selection-appearance="option"
       multiple
+      remove-selection-class="p-2 pl-0"
     >
       <template #option="{ option }">
-        <div class="formkit-option">
-          <div class="image-container">
+        <div class="flex items-center justify-between">
+          <div class="image-container w-1/4 mr-2">
             <img
               :src="`https://image.tmdb.org/t/p/w500${option.poster_path}`"
               alt="optionAvatar"
+              class="w-full"
             />
           </div>
-          <div class="text-container">
-            <div>
+          <div class="text-container w-full">
+            <div class="text-base leading-none font-bold">
               {{ option.label }}
             </div>
-            <p class="option-overview">
+            <p class="option-overview text-xs">
               {{ option.overview }}
             </p>
           </div>
@@ -61,29 +63,4 @@ async function searchMovies({ search, page, hasNextPage }) {
     </FormKit>
     <pre wrap>{{ value }}</pre>
   </FormKit>
-</template>
-
-<style>
-.formkit-option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.formkit-option img {
-  width: 100%;
-  margin-right: 20px;
-}
-
-.option-overview {
-  font-size: 12px;
-}
-
-.image-container {
-  width: 25%;
-}
-
-.text-container {
-  width: 60%;
-}
-</style>
+</template>

.examples/autocomplete-pro/autocomplete-slot-selection.vue

@@ -13,12 +13,13 @@ const carBrands = [{ label: 'Audi', value: 'audi', logo: 'https://s3.amazonaws.c
     value="audi"
   >
     <!--SELECTION SLOT-->
-      <template #selection="{ option, handlers }">
-        <div class="formkit-selection">
-          <div class="formkit-option">
+      <template #selection="{ option, classes }">
+        <div :class="classes.selection">
+          <div :class="`${classes.option} flex items-center`">
             <img
               :src="option.logo"
               :alt="option.label + ' logo'"
+              class="w-10 h-10 p-2"
             />
             <span>
               {{ option.label }}
@@ -39,12 +40,13 @@ const carBrands = [{ label: 'Audi', value: 'audi', logo: 'https://s3.amazonaws.c
     :value="['toyota', 'honda']"
   >
     <!--SELECTION SLOT-->
-      <template #selection="{ option }">
-        <div class="formkit-selection">
-          <div class="formkit-option">
+      <template #selection="{ option, classes }">
+        <div :class="`${classes.selection} !p-0`">
+          <div :class="`${classes.option} flex items-center`">
             <img
               :src="option.logo"
               :alt="option.label + ' logo'"
+              class="w-10 h-10 p-2"
             />
             <span>
               {{ option.label }}
@@ -61,10 +63,4 @@ const carBrands = [{ label: 'Audi', value: 'audi', logo: 'https://s3.amazonaws.c
   display: flex;
   align-items: center;
 }
-
-.formkit-option img {
-  width: 20px;
-  height: 20px;
-  margin-right: 10px;
-}
 </style>

.examples/autocomplete/autocomplete.vue

@@ -1,165 +1,4 @@
-<!-- %partial% -->
 <script setup>
-import { createInput } from '@formkit/vue'
-
-/**
- * This is an input "feature" — a function that accepts a node and exposes
- * some additional functionality to an input. When using schemas, this can
- * take the place of a traditional "script" block in a Vue component. In this
- * example, we expose:
- *
- *   - An input handler `search`.
- *   - An input handler `selections`.
- *   - Commit middleware to place filtered options into the `matches` prop.
- *
- * Once written, input features are added via the input declaration.
- */
-const searchFeature = (node) => {
-  // We wait for our node to be fully  "created" before we start to add our
-  // handlers to ensure the core Vue plugin has added its context object:
-  node.on('created', () => {
-    // Ensure our matches prop starts as an array.
-    node.props.matches = []
-    node.props.selection = ''
-    // When we actually have an value to set:
-    const setValue = async (e) => {
-      if (e && typeof e.preventDefault === 'function') e.preventDefault()
-      node.input(node.props.selection)
-      node.props.selection = ''
-      node.props.searchValue = ''
-      await new Promise((r) => setTimeout(r, 50)) // "next tick"
-      if (document.querySelector('input#' + node.props.id)) {
-        document.querySelector('input#' + node.props.id).focus()
-      }
-    }
-
-    // Perform a soft selection, this is shown as a highlight in the dropdown
-    const select = (delta) => {
-      const available = node.props.matches
-      let idx = available.indexOf(node.props.selection) + delta
-      if (idx >= available.length) {
-        idx = 0
-      } else if (idx < 0) {
-        idx = available.length - 1
-      }
-      node.props.selection = available[idx]
-    }
-
-    // Add some new "handlers" for our autocomplete. The handlers object is
-    // just a conventionally good place to put event handlers. Auto complete
-    // inputs always have to deal with lots of keyboard events, so that logic
-    // is registered here.
-    Object.assign(node.context.handlers, {
-      setValue,
-      selection: (e) => {
-        // This handler is called when entering data into the search input.
-        switch (e.key) {
-          case 'Enter':
-            return setValue()
-          case 'ArrowDown':
-            e.preventDefault()
-            return select(1)
-          case 'ArrowUp':
-            e.preventDefault()
-            return select(-1)
-        }
-      },
-      search(e) {
-        node.props.searchValue = e.target.value
-      },
-      hover: (e) => {
-        node.props.selection = e.target.textContent
-      },
-      unhover: (e) => {
-        if (e.target.textContent === node.props.selection) {
-          node.props.selection = ''
-        }
-      },
-    })
-  })
-
-  // Perform filtering when the search value changes
-  node.on('prop:searchValue', ({ payload: value }) => {
-    const results = node.props.options.filter((option) =>
-      option.toLowerCase().startsWith(value.toLowerCase())
-    )
-    if (!results.length) results.push('No matches')
-    node.props.matches = results
-  })
-}
-
-/**
- * This is our input schema responsible for rendering the inner “input”
- * section. In our example, we render an text input which will be used
- * to filter search results, and an unordered list that shows all remaining
- * matches.
- */
-const schema = {
-  if: '$value',
-  then: [
-    {
-      $el: 'a',
-      attrs: {
-        id: '$id',
-        href: '#',
-        class: '$classes.value',
-        onClick: '$handlers.setValue',
-      },
-      children: '$value',
-    },
-  ],
-  else: [
-    {
-      $el: 'input',
-      bind: '$attrs',
-      attrs: {
-        id: '$id',
-        class: '$classes.input',
-        onKeydown: '$handlers.selection',
-        onInput: '$handlers.search',
-        value: '$searchValue',
-      },
-    },
-    {
-      $el: 'ul',
-      if: '$matches.length < $options.length',
-      attrs: {
-        class: '$classes.dropdown',
-      },
-      children: [
-        {
-          $el: 'li',
-          for: ['match', '$matches'],
-          attrs: {
-            'data-selected': {
-              if: '$selection === $match',
-              then: 'true',
-              else: 'false',
-            },
-            class: '$classes.dropdownItem',
-            onClick: '$handlers.setValue',
-            onMouseenter: '$handlers.hover',
-            onMouseleave: '$handlers.unhover',
-          },
-          children: '$match',
-        },
-      ],
-    },
-  ],
-}
-
-/**
- * Finally we create our actual input declaration by using `createInput` this
- * places our schema into a "standard" FormKit schema feature set with slots,
- * labels, help, messages etc. The return value of this function is a proper
- * input declaration.
- */
-const autocomplete = createInput(schema, {
-  props: ['options', 'matches', 'selection', 'searchValue'],
-  features: [searchFeature],
-})
-
-// The states are a long list, so we'll burry them down here:
 const stateList = [
   'Alabama',
   'Alaska',
@@ -214,54 +53,15 @@ const stateList = [
 ]
 </script>
 
+<!-- %partial% -->
 <template>
   <FormKit
     label="U.S. State"
-    :type="autocomplete"
+    type="myAutocomplete"
     placeholder="Search for a state"
     help="What is your favorite U.S. state?"
     value="Virginia"
     :options="stateList"
   />
 </template>
 <!-- %partial% -->
-
-<style>
-.formkit-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  min-width: 15em;
-  background-color: white;
-  box-shadow: 0 0 0.5em rgba(0 0 0 / 10%);
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-  overflow: hidden;
-  border-radius: 0.25em;
-}
-.formkit-dropdown-item {
-  padding: 0.5em;
-  border-bottom: 1px solid #e4e4e4;
-}
-.formkit-dropdown-item[data-selected='true'] {
-  background-color: #cfe8fc;
-}
-.formkit-value {
-  align-items: center;
-  background-color: #f5f5f5;
-  border-radius: 0.25em;
-  box-sizing: border-box;
-  color: black;
-  display: flex;
-  justify-content: space-between;
-  padding: 0.55em 0.5em;
-  text-decoration: none;
-  width: 100%;
-}
-.formkit-value::after {
-  content: '\00D7';
-  margin-left: 0.5em;
-  font-size: 1.1em;
-}
-</style>