ograf-form
v0.1.3
Published
A web component for generating forms from OGraf/GDD schemas.
Keywords
Readme
OGraf-form
This is a Web Component for generating input forms from OGraf/GDD schemas.
Getting Started
npm install ograf-formOr you can use a CDN: https://cdn.jsdelivr.net/npm/ograf-form
Example usage
- How to use directly in html: Code, JSFiddle.
- How to use with javascript: Code, JSFiddle.
- How to use with React: Code.
Example implementation
<!DOCTYPE html>
<html>
<body>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/ograf-form"
></script>
<!-- <script type="module" src="/dist/main.js"></script> -->
<div id="form-container" style="width: 100vw">
<superflytv-ograf-form
id="ograf-form"
schema='{"type":"object","properties":{"name":{"type":"string","gddType":"single-line","default":"John Doe","description":"This is the name of the thing"}}}'
></superflytv-ograf-form>
</div>
<div id="data" style="white-space: pre"></div>
<script type="text/javascript">
// Listen to changes:
const form = document.getElementById("ograf-form");
const dataDiv = document.getElementById("data");
form.addEventListener("change", (e) => {
console.log("Caught change event", e.target.value);
// The change event is fired when a user changes a value in the form
// It does NOT fire on each key stroke.
// This is a good time to update our data object:
dataDiv.innerHTML = JSON.stringify(e.target.value, null, 2);
});
form.addEventListener("keyup", (e) => {
console.log("Caught keyup event", e.target.value);
});
</script>
</body>
</html>For Developers
# Install dependencies
yarn
# Start in dev mode
yarn dev
# Build for production
yarn build
# Bump release version (remember to push branch and tag)
yarn release
TODO
- Support
patternProperties,additionalProperties,unevaluatedProperties - Support tuples (
prefixItems/itemsas array) &additionalItems