Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yokra9/ui-schema-generator
helper library to generate uiSchema for vue-form-json-schema
https://github.com/yokra9/ui-schema-generator
vue-form-json-schema vuejs
Last synced: 2 months ago
JSON representation
helper library to generate uiSchema for vue-form-json-schema
- Host: GitHub
- URL: https://github.com/yokra9/ui-schema-generator
- Owner: yokra9
- License: mit
- Created: 2020-03-14T13:21:44.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-04-24T06:05:23.000Z (9 months ago)
- Last Synced: 2024-04-24T07:19:52.858Z (9 months ago)
- Topics: vue-form-json-schema, vuejs
- Language: JavaScript
- Size: 10.4 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.ja.md
- License: LICENSE
Awesome Lists containing this project
README
# ui-schema-generator
> [!CAUTION]
> [Vue Form JSON Schema は Vue 3 でサポートされていません](https://github.com/jarvelov/vue-form-json-schema/issues/81)。 Vue 2 は 2023/12/31 に End of Life (EOL) に達しました。
[](https://github.com/yokra9/ui-schema-generator/actions/workflows/Jest.yml)
[](https://github.com/yokra9/ui-schema-generator/actions/workflows/E2E.yml)
[](https://badge.fury.io/js/ui-schema-generator)
[](https://badge.fury.io/js/ui-schema-generator)
[Vue Form JSON Schema](https://github.com/jarvelov/vue-form-json-schema) を利用する際、uiSchema 定義を手助けするライブラリです。モデル名を配列で指定することで、uiSchema をまとめて生成することができます。
## デモ
## インターフェース
GitHub Pages を参照
## 利用例
```vue
import VueFormJsonSchema from "vue-form-json-schema";
import generator from "ui-schema-generator";
import jsonSchema from "./schema.json";
const Schema = jsonSchema.definitions.Schema;
import "vuetify/dist/vuetify.min.css";
import Vue from "vue"
import vuetify from "vuetify"
Vue.use(vuetify)
export default {
components: {
VueFormJsonSchema,
},
data() {
return {
model: {},
options: {
showValidationErrors: true,
},
schema: Schema,
uiSchema: new generator(Schema)
// データオブジェクトのデフォルト値をセット
.setDefaultFieldOptions({
attrs: {
outlined: true,
// 値として function(model) を取ることもできる。
label: (model) => model || "",
hint: (model) =>
model ? Schema.properties[model].description : "",
},
class: "mt-5",
})
// エラーオプションのデフォルト値をセット
.setDefaultErrorOptions({
attrs: {
error: true,
},
})
// uiSchema を生成
.generate(
"div", // HTML タグ名
null, // 要素と紐付けるモデル。未定義の場合は紐付けない
// データオブジェクト
{
style: { backgroundColor: "#043c78", color: "white" },
class: "pl-1",
},
// 子要素。UiSchemaGenerator のネストも可能
new generator(Schema)
.generate("h1", [], { domProps: { innerHTML: "Header" } })
.toArray()
)
// 同じような uiSchema はまとめて生成することも可能
.generate(
"v-text-field",
["firstName", "familyName", "address", "country"],
{
on: "input",
attrs: {
clearable: true,
},
}
)
// 選択肢には Enum を指定すると便利
.generate("v-select", ["country"], {
on: "change",
attrs: {
items: Schema.properties.country.enum,
},
})
// グループ化されているコンポーネントの場合
.generate(
"v-radio-group",
["country"],
{
on: "change",
},
// 子要素でも準備が必要
new generator(Schema)
.setDefaultFieldOptions({
attrs: {
// indexにはuiSchemaの先頭から何要素であるかが格納される
label: (_model, index) =>
Schema.properties["country"].enum[index],
value: (_model, index) =>
Schema.properties["country"].enum[index],
},
})
.generate("v-radio", [])
.generate("v-radio", [])
.toArray()
)
.toArray(),
};
},
};
```
`/demo/` 内のコードも参考にしてください。