80 lines
1.7 KiB
Markdown
80 lines
1.7 KiB
Markdown
# @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
|
||
|
||
```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" }
|
||
]
|
||
```
|
||
|
||
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
|
||
|
||
```bash
|
||
npm install
|
||
npm test
|
||
npm run build
|
||
npm run storybook
|
||
```
|
||
|
||
## License
|
||
|
||
MIT
|