windychen
fc1d8df60f
Node.js Build / build (push) Has been skipped
- 基于 grill-me Q1-Q61 决策 - Vitest 测试与 CI workflow - middleware: parseFilters 核心实现 - component: Vue3 TransForm 基础组件 + Storybook Co-authored-by: Cursor <cursoragent@cursor.com>
@windychen/trans-form-component
Vue 3 dynamic query form component. Accepts a schema array, emits structured filter conditions for backend middleware.
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" }
]
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