- 基于 grill-me Q1-Q61 决策 - Vitest 测试与 CI workflow - middleware: parseFilters 核心实现 - component: Vue3 TransForm 基础组件 + Storybook Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -0,0 +1,75 @@
|
||||
# @windychen/trans-form-component
|
||||
|
||||
Vue 3 dynamic query form component. Accepts a schema array, emits structured filter conditions for backend middleware.
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
npm install @windychen/trans-form-component vue@^3.4
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
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 },
|
||||
});
|
||||
```
|
||||
|
||||
```vue
|
||||
<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
|
||||
|
||||
```json
|
||||
[
|
||||
{ "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
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm test
|
||||
npm run build
|
||||
npm run storybook
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
Reference in New Issue
Block a user