https://github.com/marcodpt/json-schema-bootstrap
My json-schema bootstrap user interface
https://github.com/marcodpt/json-schema-bootstrap
Last synced: 4 months ago
JSON representation
My json-schema bootstrap user interface
- Host: GitHub
- URL: https://github.com/marcodpt/json-schema-bootstrap
- Owner: marcodpt
- License: mit
- Created: 2022-04-21T13:23:51.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-30T19:09:26.000Z (over 3 years ago)
- Last Synced: 2025-01-13T15:27:34.035Z (about 1 year ago)
- Language: JavaScript
- Size: 705 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# json-schema-bootstrap
My json-schema bootstrap5 user interface
[Live demo](https://marcodpt.github.io/h/?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Fmarcodpt%2Fjson-schema-bootstrap%2Fsamples.js)
## Usage
### Form sample
```js
import jsb from 'https://cdn.jsdelivr.net/gh/marcodpt/json-schema-bootstrap/index.js'
console.log(jsb({
schema: {
title: 'Docs Form',
properties: {
name: {
minLength: 1
},
bio: {
title: '',
description: 'Say something about yourself...',
format: 'text'
}
},
default: {
name: 'John'
}
},
options: {
resolve: data => console.log(JSON.stringify(data, undefined, 2))
}
}))
```
```html
Docs Form
name
Submit
```
### Table sample
```js
import jsb from 'https://cdn.jsdelivr.net/gh/marcodpt/json-schema-bootstrap/index.js'
console.log(jsb({
schema: {
title: 'Docs Table',
links: [
{
title: 'Post',
href: '#/post',
ui: 'btn btn-success',
icon: 'fas fa-pencil-alt',
rel: 'self'
}
],
items: {
properties: {
id: {},
register: {
format: 'date'
},
name: {
href: '#?name={name}'
}
},
links: [
{
href: '#/delete/{id}',
rel: 'self',
icon: 'fas fa-trash',
ui: 'btn btn-danger btn-sm'
}, {
href: '#/edit/{id}',
rel: 'self',
icon: 'fas fa-edit',
ui: 'btn btn-warning btn-sm'
}
]
},
default: [
{
id: 1,
register: '2021-03-02',
name: 'Liam'
}, {
id: 2,
register: '2021-01-05',
name: 'Olivia'
}
]
}
}))
```
```html
Docs Table
id
register
name
1
3/1/2021
Liam
2
1/4/2021
Olivia
```
## Params
- object `schema`: JSON schema (or hyperschema) of the element
- object `options`: Optional object with config options, properties:
- function `resolve`(`data`): A function that will be called with current
UI data every time user resolve it and pass validation.
- function `reject`(`error`, `data`): A function that will be called with
an error message and current data every time user resolve it and DO NOT
pass validation.
- function `loader`(`url`): A function that returns a promise with the
result of fetch `url`.
- function `watch`(`data`): A function that resolve changes in child
outside of `resolve`, useful for example for table checkbox.
- boolean `showValid` (default: false): Wherever you want to use valid
interface on user input.
- string `language` (default: en): One of the available languages
(`en`: English, `pt`: Portuguese). Please help us extend the supported
languages in the folder [lang](https://github.com/marcodpt/json-schema-bootstrap/tree/main/lang).
- object `interfaces` (default: {}): User defined interfaces, properties:
- string `keys`: name of the interface, to be used with `format` property.
- function `values`(`schema`, `submit`(`data`), `options`): A function
that defines a new user interface, where `schema` and `options` is the
original variables passed, and `submit` is a function to update the
the input value (in case `submit` is `null` it is a read only output).