vue-formkit-example/src/App.vue

<script setup lang="ts">
import { FormKitSchemaDefinition, getNode, type FormKitNode } from '@formkit/core';
import { onMounted } from 'vue';
import Guests from './guests.vue';

async function submit(...args: any[]) {
  console.debug('submit', `args :>> `, args);
  await new Promise(r => setTimeout(r, 1000))
  alert('Submitted! 🎉')
}

const castNumber = (node: FormKitNode) => {
  node.hook.input((value, next) => next(Number(value)))
}

onMounted(() => {
  console.group('onMounted')
  const nameNode = getNode('nameNodeId')
  Object.assign(window, { nameNode })
  console.debug(`nameNode :>> `, nameNode);

  const schemaGroupInput = nameNode!.root.at('schemaGroup.input')
  console.debug(`schemaGroupInput :>> `, schemaGroupInput);
  nameNode!.on('commit', ({ payload }) => {
    console.debug('[nameNode] [on commit]', `payload :>> `, payload);
    schemaGroupInput!.input(`姓名：${payload}`)
  })
  console.groupEnd()
})

const SCHEMA: FormKitSchemaDefinition = [
  {
    $el: 'h1',
    children: [
      {
        $el: 'span',
        children: 'JSON Schema Form',
      },
    ],
    attrs: {
      class: 'font-bold text-2xl mb-4',
      'data-foo': 'bar',
    },
  },
  {
    $formkit: 'group',
    name: 'schemaGroup',
    children: [
      {
        $formkit: 'text',
        label: 'JSON Schema’ed Input',
        name: 'input',
        validation: 'required',
        validationLabel: 'validationLabel', // validation message 使用顺序：validationLabel > label > name
        errors: ['显式设置的错误是非阻塞的，这意味着它们不会像验证错误那样阻止表单提交。您可以在表单文档中了解更多有关错误处理的信息。']
      }
    ]
  }
];
</script>

<template>
  <div class="bg-white rounded-xl shadow-xl p-8 mx-auto my-16 max-w-[450px]">

    <FormKit
      type="form"
      #default="{ value }"
      @submit="submit"
      submit-label="提交 ✨"
    >
      <div class="character-attributes">

        <FormKit
          type="group"
          name="attributes"
          :validation-rules="{
            validateGroup: (node) => {
              const name = (node.value as Record<string, any>).name
              return name?.includes('测试') ? true : false
            }
          }"
          validation-visibility="live"
          validation="validateGroup"
          :validation-messages="{
            validateGroup: ({ name/* , args */ }) => {
              return `分组 ${name} 下的姓名必须包含 '测试' 字符串。`
            },
          }"
          #default="{ id, messages, fns, classes }"
        >

          <FormKit
            type="text"
            name="name"
            id="nameNodeId"
            label="姓名"
            help="别人都叫你什么？"
            some-attr="some-attr-value"
          />

          <FormKit
            type="checkbox"
            name="flavors"
            label="最喜欢的冰淇淋口味"
            :options="{
              'vanilla': '香草',
              'chocolate': '巧克力',
              'strawberry': '草莓',
            }"
            validation="required|min:2"
          />
          <FormKit
            type="range"
            name="strength"
            id="strength"
            label="力量"
            value="5"
            validation="min:2|max:9"
            validation-visibility="live"
            min="1"
            max="10"
            step="1"
            help="这个角色应该有多少力量点？"
            :plugins="[castNumber]"
            class="mb-4"
          />


          <!-- By default groups do not show validation messages, so we need to add it manually -->
          <ul
            class="error-box"
            :class="classes.messages"
            v-if="fns.length(messages)"
          >
            <li
              v-for="message in messages"
              :key="message.key"
              :id="`${id}-${message.key}`"
              :data-message-type="message.type"
            >
              {{ message.value }}
            </li>
          </ul>
        </FormKit>
      </div>

      <div class="character-attributes">
        <FormKitSchema :schema="SCHEMA" />
      </div>

      <Guests />

      <FormKit
        type="checkbox"
        name="agree"
        label="我同意FormKit是最好的表单开发框架。"
        class="mb-4"
      />

      <pre class="font-mono text-sm p-4 bg-slate-100 mb-4">{{ value }}</pre>

    </FormKit>
  </div>
</template>

<style scoped>
ul.error-box {
  padding: 0.75rem;
  border: 1px solid #ef4444;
  border-radius: 0.375rem;
  background-color: #fee2e2;
  color: #b91c1c;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

ul.error-box p {
  font-weight: 500;
}
</style>

<style>
.character-attributes {
  padding: 1.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  background-color: #f9fafb;
}
</style>