feat(FormKit): work on Button component

epicmaxco · Dec 5, 2024 · fec6bf9 · fec6bf9
1 parent 7d78c39
commit fec6bf9
Show file tree

Hide file tree

Showing 7 changed files with 154 additions and 48 deletions.
diff --git a/packages/docs/page-config/extensions/formkit/examples/BasicForm.vue b/packages/docs/page-config/extensions/formkit/examples/BasicForm.vue
@@ -5,11 +5,11 @@
 
   <FormKit
     v-slot="{ state: { loading } }"
+    v-model="formValue"
     :type="types.form"
     class="grid grid-cols-1 md:grid-cols-3 gap-6"
     :submit-label="loading ? 'Submitting...' : ''"
     @submit="submitApp"
-    v-model="formValue"
   >
     <div>
       <FormKit

diff --git a/packages/docs/page-config/extensions/formkit/examples/Button.vue b/packages/docs/page-config/extensions/formkit/examples/Button.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import * as types from '@vuestic/formkit'
+
+type HTMLElementEvent<T = HTMLElement> = Event & {
+  target: T;
+}
+
+const randomColor = (e: HTMLElementEvent) => {
+  const hex = Math
+    .floor(Math.random()*16777215)
+    .toString(16);
+
+  e.target!.setAttribute(
+    'style',
+    'background-color: #' + hex + '88;'
+  )
+}
+</script>
+
+<template>
+  <div class="grid gap-6">
+    <FormKit
+      :type="types.button"
+      color="danger"
+      label="Checkout my label"
+      help="You can use the label prop."
+    />
+
+    <FormKit
+      :type="types.button"
+      help="You can use the default slot."
+      prefix-icon="check"
+    >
+      I have slot content
+    </FormKit>
+
+    <FormKit
+      :type="types.button"
+      help="You can bind event listeners."
+      @click="randomColor"
+    >
+      Click me!
+    </FormKit>
+  </div>
+</template>
+
diff --git a/packages/docs/page-config/extensions/formkit/index.ts b/packages/docs/page-config/extensions/formkit/index.ts
@@ -34,6 +34,10 @@ export default definePageConfig({
       codesandboxConfig: { dependencies },
       title: "Checkbox",
     }),
+    block.example("Button", {
+      codesandboxConfig: { dependencies },
+      title: "Button",
+    }),
     block.example("BasicForm", {
       codesandboxConfig: { dependencies },
       title: "Basic Form",

diff --git a/packages/formkit/playground/src/App.vue b/packages/formkit/playground/src/App.vue
@@ -1,50 +1,46 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import * as types from '../../src'
 
-export default defineComponent({
-  setup() {
-    return {
-      types
-    }
-  }
-})
+type HTMLElementEvent<T = HTMLElement> = Event & {
+  target: T;
+}
 
+const randomColor = (e: HTMLElementEvent) => {
+  const hex = Math
+    .floor(Math.random()*16777215)
+    .toString(16);
+
+  e.target!.setAttribute(
+    'style',
+    'background-color: #' + hex + '88;'
+  )
+}
 </script>
 
 <template>
-  <div class="pa-4">
-    <table class="va-table">
-      <tbody>
-      <tr
-        v-for="(type, typeName) in types"
-        :key="typeName"
-      >
-        <td>{{ typeName }}</td>
-        <td>
-          <FormKit
-            v-if="type"
-            :type="type"
-            :label="typeName"
-            validation="required|min:3"
-            name="test"
-            help="help"
-          />
-          <p v-else>
-            null
-          </p>
-        </td>
-      </tr>
-      </tbody>
-    </table>
-
+  <div class="d-flex flex-direction-column pa-4" style="gap: 1.5rem">
     <FormKit
-      :type="types.text"
-      label="Test"
-      validation="required|min:3"
-      name="test"
-      help="aaa"
+      :type="types.button"
+      color="danger"
+      label="Checkout my label"
+      help="You can use the label prop."
     />
+
+    <FormKit
+      :type="types.button"
+      help="You can use the default slot."
+      prefix-icon="check"
+    >
+      I have slot content
+    </FormKit>
+
+    <FormKit
+      :type="types.button"
+      help="You can bind event listeners."
+      @click="randomColor"
+    >
+      Click me!
+    </FormKit>
   </div>
 </template>
 
diff --git a/packages/formkit/playground/src/main.ts b/packages/formkit/playground/src/main.ts
@@ -5,4 +5,5 @@ import { plugin, defaultConfig } from '@formkit/vue'
 import 'vuestic-ui/css'
 import { createVuestic } from 'vuestic-ui'
 
+// @ts-ignore
 createApp(App).use(plugin, defaultConfig).use(createVuestic()).mount('#app')
diff --git a/packages/formkit/src/button.ts b/packages/formkit/src/button.ts
@@ -2,18 +2,46 @@ import { FormKitTypeDefinition } from '@formkit/core'
 import {
   outer,
   wrapper,
-  help,
-  messages,
-  message,
-  icon,
   prefix,
   suffix,
   createSection,
   buttonLabel,
   localize,
   ignores,
 } from '@formkit/inputs'
-import { VaButton } from 'vuestic-ui'
+import { VaButton, VaMessageList, VaIcon } from 'vuestic-ui'
+import { icon } from './icon'
+
+
+export const help = createSection('help', () => ({
+  $cmp: 'VaMessageList',
+  if: '$help',
+  props: {
+    id: '$: "help-" + $id',
+    modelValue: '$help'
+  }
+}))
+
+
+export const message = createSection('message', () => ({
+  $el: 'li',
+  for: ['message', '$messages'],
+  attrs: {
+    key: '$message.key',
+    id: `$id + '-' + $message.key`,
+    'data-message-type': '$message.type',
+  },
+}))
+
+export const messages = createSection('messages', () => ({
+  $cmp: 'VaMessageList',
+  if: '$defaultMessagePlacement && $fns.length($messages)',
+  props: {
+    key: '$message.key',
+    id: `$id + '-' + $message.key`,
+    'data-message-type': '$message.type',
+  },
+}))
 
 export const buttonInput = createSection('input', () => ({
   $cmp: 'VaButton',
@@ -26,7 +54,6 @@ export const buttonInput = createSection('input', () => ({
   },
 }))
 
-
 /**
  * Input definition for a button.
  * @public
@@ -46,7 +73,7 @@ export const button: FormKitTypeDefinition = {
         icon('suffix')
       )
     ),
-    help('$help')
+    help()
   ),
   /**
    * The type of node, can be a list, group, or input.
@@ -67,12 +94,20 @@ export const button: FormKitTypeDefinition = {
   forceTypeProp: 'button',
 
   library: {
-    'VaButton': VaButton
+    VaButton,
+    VaMessageList,
+    VaIcon
   },
   /**
    * Additional features that should be added to your input
    */
   features: [localize('submit'), ignores],
+
+  /**
+   * A key to use for memoizing the schema. This is used to prevent the schema
+   * from needing to be stringified when performing a memo lookup.
+   */
+  schemaMemoKey: `${Math.random()}`,
 }
 
 export const submit = {

diff --git a/packages/formkit/src/icon.ts b/packages/formkit/src/icon.ts
@@ -0,0 +1,24 @@
+import { createSection, type FormKitSchemaExtendableSection } from "@formkit/inputs";
+
+/**
+ * Icon section used by all icons
+ *
+ * @public
+ */
+export const icon = (
+  sectionKey: string,
+): FormKitSchemaExtendableSection => {
+  return createSection(`${sectionKey}Icon`, () => {
+    return {
+      if: `$${sectionKey}Icon`,
+      $cmp: 'VaIcon',
+      props: {
+        class: 'material-icons',
+        onClick: `$handlers.iconClick(${sectionKey})`,
+        role: `$fns.iconRole(${sectionKey})`,
+        tabindex: `$fns.iconRole(${sectionKey}) === "button" && "0" || undefined`,
+      },
+      children: '$prefixIcon'
+    }
+  })()
+}