@windychen/trans-form-component

Vue 3 dynamic query form component. Accepts a schema array, emits structured filter conditions for backend middleware.

版本 0.1.0 — 首个可发布版本：内置 headless 控件（input/textarea/select/number/date/tags/between）、12 栅格布局、component-map 组件注册、filters 状态标记输出。

Install

npm install @windychen/trans-form-component vue@^3.4

Usage

import { createApp } from 'vue';
import { TransFormPlugin, setConfig } from '@windychen/trans-form-component';
import '@windychen/trans-form-component/style.css';

const app = createApp(App);
app.use(TransFormPlugin);

setConfig({
  colRatio: { name: 3, query: 2, value: 7 },
});

<template>
  <TransForm :schema="schema" @change="onChange" ref="formRef" />
</template>

<script setup>
import { ref } from 'vue';

const formRef = ref();
const schema = [
  {
    row: 6,
    'value-component': 'input',
    field: 'name',
    'field-name': '名称',
    'query-option': [{ value: 'EQ', label: '=' }],
  },
];

function onChange(filters) {
  console.log(filters);
}
</script>

Output shape

[
  { "field": "name", "value": "xx", "query": "EQ" },
  { "field": "tags", "value": null, "query": "IN", "empty": true, "logic": "OR" }
]

Output items carry state flags: disabled: true / hidden: true are skipped by middleware by default, readOnly: true is parsed normally, and empty: true marks an empty value (kept unless skipEmpty).

Pair with @windychen/trans-form-middleware for server-side parsing.

See DESIGN.md for full grill-me decisions (Q1–Q61).

Scripts

npm install
npm test
npm run build
npm run storybook

License

MIT