wxsub/element-plus-formkit/element-plus-formkit-generator

Form Development

Whenever the user needs to build or create a form — whether from an uploaded image, a text description, or any other requirement — use this skill to generate form code using the element-plus-formkit component.

This skill is not limited to image-based scenarios. Any request involving form creation should use this skill.

Workflow

Step 1: Analyze the Image

Carefully examine the uploaded image and identify all form elements. For each form field, extract the following information:

• Label: The display text of the form field (e.g. "Name", "Department Name")
• Type: The form control type (refer to the type mapping table below)
• Required: Whether the field is marked as required (usually indicated by a red asterisk *)
• Options: For dropdown/radio/checkbox fields, extract all available options
• Layout: Observe the form layout (number of columns, groups, sections)

Step 2: Map FormKit Config Types

Based on the visual form elements in the image, map them to the corresponding formkit type. For full module documentation, refer to: element-plus-formkit Modules

Basic Modules

Selection Modules

Date/Time Modules

Note: When datetime form fields are detected in the image, always add class: '!w-full' to the props of that config item by default.

Advanced Modules

Dynamic Options Loading

Modules such as select and mention support dynamically fetching options via requester + handler fields:

{
    type: 'select',
    label: 'Selector',
    key: 'dynamicSelect',
    props: { placeholder: 'Please select' },
    requester: async () => {
        const response = await fetchOptions()
        return response
    },
    handler: (response: any) => response?.items || []
}

Cascader Options Format

Cascader options use a different format from regular selectors, with { value, label, children } structure:

{
    type: 'cascader',
    label: 'Cascader',
    key: 'cascaderValue',
    options: [
        {
            value: 'guide',
            label: 'Guide',
            children: [
                {
                    value: 'disciplines',
                    label: 'Rules',
                    children: [
                        { value: 'consistency', label: 'Consistency' },
                        { value: 'feedback', label: 'Feedback' }
                    ]
                }
            ]
        }
    ],
    props: { placeholder: 'Please select data', clearable: true }
}

Step 3: Generate Config Array

Generate a formkit config array following the project's existing pattern. Each config item follows this structure:

{
    type: 'input',          // formkit module type
    label: 'Field Label',   // display label
    key: 'fieldName',       // data binding key (use camelCase)
    rules: [{ required: true, message: 'Please enter xxx', trigger: 'change' }],  // validation rules (add when required)
    props: {                // element-plus component props
        placeholder: 'Please enter xxx',
        clearable: true,
        // ...other element-plus props
    }
}

Key Naming Rules:

• Use camelCase (e.g. deptName, phone, createTime)
• Names should be descriptive yet concise
• Map Chinese label meanings to English (e.g. "机构名称" -> deptName or institutionName)

Options Format (select/radio/checkbox):

options: [
    { name: 'Display Name', id: 'value' },
    { name: 'Display Name 2', id: 'value2' }
]

Step 4: Generate Complete Vue Component Code

Generate code containing the following:

1. Template: Use the <formkit> component with :config and v-model
2. Script: Import formkit, define reactive form data and config

Template Pattern

<template>
  <formkit
    :config="formConfig"
    v-model="formData"
    label-position="right"
    :label-width="120"
    :columns="2"
    :gap="{ col: 30, row: 20 }"
    ref="formRef"
  />
</template>

Common formkit Component Properties:

label-width Calculation Strategy (only effective when label-position is 'left' or 'right', ignored when 'top'):

1. Analyze the label widths of all form items in the image, calculate an average, and set it as the component prop label-width (number type)

2. If a form item has a label significantly wider than the average, precisely specify labelWidth: '150px' (string type) in that config item to prevent label text wrapping

Example: Most labels are about 80px wide, but one label "Central Local Unit Identifier" is about 150px wide:

```ts

// Set uniformly on component

<formkit :label-width="80" ... />

// Override precisely in the specific config item

{ type: 'radio', label: 'Central Local Unit Identifier', key: 'unitId', labelWidth: '150px', ... }

```

Script Pattern

<script setup lang="ts">
import { reactive } from 'vue'
import formkit, { type Instance } from 'element-plus-formkit'
 
const dataset = reactive<Record<string, any>>({})
 
const formConfig = reactive([
  // ... generated config items
])
 
const formRef = ref<Instance>()
 
async function onSubmit() {
  await formRef.value?.validate()
  // submit logic
  console.log(dataset)
}
</script>

Step 5: Handle Special Cases

Dictionary Dropdown Fields: If the dropdown select field in the image may use system dictionary data:

{
    type: 'dict',
    label: 'Field Label',
    key: 'fieldName',
    props: {
        placeholder: 'Please select xxx',
        type: 'dictionary_key'  // dictionary type key
    }
}

Grouped Form Sections: If the form has groups/sections, use el-divider or section titles between multiple <formkit> instances:

<div class="modify-dialog-title">Basic Information</div>
<formkit :config="basicConfig" v-model="formData" ... />
<el-divider />
<div class="modify-dialog-title">Other Information</div>
<formkit :config="otherConfig" v-model="formData" ... />

Span Fine-grained Layout Control:

Both columns and span control the number of form items per row and do not conflict:

• columns is a component prop for quick uniform layout (e.g. columns: 3 means exactly 3 items per row)
• span is a config item prop that divides each row into 24 equal parts, precisely controlling how many parts each item occupies, with higher priority than `columns`

Usage Strategy:

• If the form has a fixed number of columns per row, simply use columns
• If most rows have a fixed column count but some rows differ (e.g. a row with only 2 or 4 items), use span for those rows

Example: Assuming columns: 3 (3 items per row, each taking 8 equal parts), but one row has only 2 items that should each take half:

// Previous items arranged normally, 3 per row
{ type: 'input', label: 'Name', key: 'name' },
{ type: 'input', label: 'Phone', key: 'phone' },
{ type: 'input', label: 'Email', key: 'email' },
// These two items should each take half (12 equal parts), overriding columns: 3 default behavior
{ type: 'input', label: 'Address', key: 'address', span: 12 },
{ type: 'input', label: 'Zip Code', key: 'zipCode', span: 12 },
// Full row (24 equal parts)
{
    type: 'input',
    label: 'Remark',
    key: 'remark',
    span: 24,
    props: {
        type: 'textarea',
        placeholder: 'Please enter remark',
        rows: 4
    }
}

Disabled/Read-only Fields:

{
    type: 'input',
    label: 'Field Label',
    key: 'fieldName',
    disabled: true,
    props: {
        placeholder: 'Auto generated'
    }
}

Slots:

formkit supports various slots for extending form content. For full documentation, refer to: element-plus-formkit Slots