@s-form/core

用 JSON 组合 Vue 组件，生成表单页面。

@s-form/core 提供 SmartForm 渲染器、schema 类型和自定义组件接入能力。组件预设包单独发布，例如 Element Plus 预设为 @s-form/preset-element-plus。

Install

只安装核心包：

npm i @s-form/core

搭配 Element Plus 预设使用：

npm i @s-form/core @s-form/preset-element-plus element-plus

Usage

import { reactive, h } from 'vue'
import type { Rules } from 'async-validator'
import { ElLink } from 'element-plus'
import { Share } from '@element-plus/icons-vue'
import { SmartForm } from '@s-form/core'
import { useEleSchema } from '@s-form/preset-element-plus'
import '@s-form/core/style.css'

const schema = useEleSchema()([
  {
    label: '输入框',
    alias: 'input',
    key: 'name',
  },
  {
    label: '多 model 绑定',
    alias: 'pagination',
    key: 'submit',
    modelKeyMap: {
      currentPage: 'page',
      pageSize: 'pageSize',
    },
    props: {
      total: 123,
      layout: 'sizes, prev, pager, next',
    },
  },
  {
    label: '自定义插槽',
    alias: 'button',
    key: 'link',
    slot: () => h(ElLink, { href: 'https://kokodayo.fun' }, () => '123'),
    slots: {
      icon: Share,
    },
  },
  {
    label: '默认插槽 / 事件绑定',
    alias: 'button',
    key: 'action',
    slot: 'reset',
    props: {
      onClick: () => {
        model.name = 'odex'
        model.page = 1
        model.pageSize = 20
      },
    },
  },
])

const model = reactive({ name: '123', page: 1, pageSize: 20 })

const rules: Rules = {
  name: {
    min: 10,
  },
}

<template>
  <SmartForm
    class="space-y-4"
    :model-value="model"
    :rules="rules"
    :form-schema="schema"
    label-width="auto"
  />
</template>

Style

Import the package stylesheet explicitly:

import '@s-form/core/style.css'

The legacy @s-form/core/style path is still kept for compatibility, but style.css is the recommended entry.