fix: use proper Messages section

epicmaxco · Dec 26, 2024 · d7d753d · d7d753d
1 parent f83d64b
commit d7d753d
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 26 deletions.
diff --git a/packages/formkit/src/button.ts b/packages/formkit/src/button.ts
@@ -12,7 +12,7 @@ import {
 import { token } from '@formkit/utils'
 import { VaButton, VaMessageList, VaIcon } from 'vuestic-ui'
 import { vuesticInputs } from './features/vuesticInputs';
-import { icon, message, messages, help } from './sections'
+import { icon, messages, help } from './sections'
 
 export const buttonInput = createSection('input', () => ({
   $cmp: 'VaButton',
@@ -35,7 +35,7 @@ export const button: FormKitTypeDefinition = {
    * The actual schema of the input, or a function that returns the schema.
    */
   schema: outer(
-    messages(message('$message.value')),
+    messages(),
     wrapper(
       buttonInput(
         icon('prefix'),

diff --git a/packages/formkit/src/features/vuesticInputs.ts b/packages/formkit/src/features/vuesticInputs.ts
@@ -2,4 +2,11 @@ import type { FormKitNode } from "@formkit/core";
 
 export function vuesticInputs(node: FormKitNode): void {
   node.addProps(['loading'])
+
+  node.on('created', () => {
+    node.context!.fns.arrayMessages = (obj: Record<PropertyKey, any>) =>
+      Object.values(obj)
+        .filter(m => m.visible)
+        .map(m => m.value)
+  })
 }
diff --git a/packages/formkit/src/file.ts b/packages/formkit/src/file.ts
@@ -3,7 +3,7 @@ import { createSection, outer } from '@formkit/inputs'
 import { token } from '@formkit/utils'
 import { VaFileUpload } from 'vuestic-ui'
 import { vuesticInputs } from './features/vuesticInputs';
-import { help, message, messages } from './sections';
+import { help, messages } from './sections';
 import { createInputWrapper } from './createInputWrapper';
 
 const FormKitInputWrapper = createInputWrapper(VaFileUpload)
@@ -27,7 +27,7 @@ export const file: FormKitTypeDefinition = {
    * The actual schema of the input, or a function that returns the schema.
    */
   schema: outer(
-    messages(message()),
+    messages(),
     fileInput(),
     help(),
   ),

diff --git a/packages/formkit/src/form.ts b/packages/formkit/src/form.ts
@@ -7,15 +7,13 @@ import {
   forms,
   disablesChildren,
 } from '@formkit/inputs'
-import { messages, message } from './sections'
+import { messages } from './sections'
 import { submit } from './submit'
+import { vuesticInputs } from "./features/vuesticInputs";
 
 export const formInput = createSection('form', () => ({
   $cmp: 'VaForm',
   bind: '$attrs',
-  meta: {
-    autoAnimate: true,
-  },
   props: {
     id: '$id',
     name: '$node.name',
@@ -43,7 +41,7 @@ export const form: FormKitTypeDefinition = {
    */
   schema: formInput(
     '$slots.default',
-    messages(message('$message.value')),
+    messages(),
     actions(submitInput())
   ),
   /**
@@ -69,7 +67,7 @@ export const form: FormKitTypeDefinition = {
   /**
    * Additional features that should be added to your input
    */
-  features: [forms, disablesChildren],
+  features: [vuesticInputs, forms, disablesChildren],
   /**
    * The key used to memoize the schema.
    */

diff --git a/packages/formkit/src/sections/index.ts b/packages/formkit/src/sections/index.ts
@@ -1,5 +1,4 @@
-import { createSection, type FormKitSchemaExtendableSection } from "@formkit/inputs";
-
+import { createSection, type FormKitSchemaExtendableSection } from '@formkit/inputs'
 
 export const icon = (
   sectionKey: string,
@@ -34,22 +33,12 @@ export const help = createSection('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',
+    id: '$: "errors-" + $id',
+    modelValue: '$fns.arrayMessages($messages)',
+    color: 'danger'
   },
 }))
diff --git a/packages/ui/src/stories/formkit/Form.stories.ts b/packages/ui/src/stories/formkit/Form.stories.ts
@@ -36,7 +36,7 @@ export const Basic: StoryFn = () => ({
         v-slot="{ state: { loading } }"
         v-model="formValue"
         :type="types.form"
-        class="grid grid-cols-1 md:grid-cols-3 gap-6"
+        class="grid grid-cols-1 gap-6"
         :submit-label="loading ? 'Submitting...' : ''"
         @submit="submitApp"
       >