# @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