Skip to content

feat!: rename "data" to "value", "onChange" to "change" and more! #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nytamin merged 3 commits into from
Oct 22, 2025
Merged

feat!: rename "data" to "value", "onChange" to "change" and more! #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
713088a
feat!: rename events and properties
nytamin Oct 22, 2025
80bc408
feat: add support for consumer defining custom elements
nytamin Oct 22, 2025
a6469b1
feat: add postRender callback
nytamin Oct 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified .yarn/install-state.gz
View file
Open in desktop
Binary file not shown.
21 changes: 13 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ This is a Web Component for generating input forms from [OGraf/GDD](https://ogra
npm install ograf-form
```

Or you can use a CDN: `https://cdn.jsdelivr.net/npm/ograf-form/dist/main.js);`
Or you can use a CDN: `https://cdn.jsdelivr.net/npm/ograf-form);`

### Example usage

Expand All @@ -26,7 +26,7 @@ Or you can use a CDN: `https://cdn.jsdelivr.net/npm/ograf-form/dist/main.js);`
<body>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/ograf-form/dist/main.js"
src="https://cdn.jsdelivr.net/npm/ograf-form"
></script>
<!-- <script type="module" src="/dist/main.js"></script> -->

Expand All @@ -42,15 +42,15 @@ Or you can use a CDN: `https://cdn.jsdelivr.net/npm/ograf-form/dist/main.js);`
// Listen to changes:
const form = document.getElementById("ograf-form");
const dataDiv = document.getElementById("data");
form.addEventListener("onChange", (e) => {
console.log("Caught onChange event", e.detail.data);
// The onChange event is fired when a user changes a value in the form
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.detail.data, null, 2);
dataDiv.innerHTML = JSON.stringify(e.target.value, null, 2);
});
form.addEventListener("onKeyUp", (e) => {
console.log("Caught onKeyUp event", e.detail.data);
form.addEventListener("keyup", (e) => {
console.log("Caught keyup event", e.target.value);
});
</script>
</body>
Expand All @@ -75,3 +75,8 @@ yarn release


```

## TODO

- Support `patternProperties`, `additionalProperties`, `unevaluatedProperties`
- Support tuples (`prefixItems` / `items` as array) & `additionalItems`
20 changes: 10 additions & 10 deletions examples/html.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<!DOCTYPE html>
<html>
<body>
<script
<!-- <script
type="module"
src="https://cdn.jsdelivr.net/npm/ograf-form/dist/main.js"
></script>
<!-- <script type="module" src="/dist/main.js"></script> -->
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
Expand All @@ -19,15 +19,15 @@
// Listen to changes:
const form = document.getElementById("ograf-form");
const dataDiv = document.getElementById("data");
form.addEventListener("onChange", (e) => {
console.log("Caught onChange event", e.detail.data);
// The onChange event is fired when a user changes a value in the form
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.detail.data, null, 2);
dataDiv.innerHTML = JSON.stringify(e.target.value, null, 2);
});
form.addEventListener("onKeyUp", (e) => {
console.log("Caught onKeyUp event", e.detail.data);
form.addEventListener("keyup", (e) => {
console.log("Caught keyup event", e.target.value);
});
</script>
</body>
Expand Down
21 changes: 11 additions & 10 deletions examples/javascript.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
const dataDiv = document.getElementById("data");

// Load the library, either from CDN or locally:
const OgrafForm = await import("https://cdn.jsdelivr.net/npm/ograf-form/dist/main.js");
// const OgrafForm = await import("https://cdn.jsdelivr.net/npm/ograf-form");
const OgrafForm = await import("/dist/main.js");
// const OgrafForm = await import("ograf-form");

// Define a OGraf/GDD JSON-schema:
Expand All @@ -30,20 +31,20 @@

// Initialize the Form:
const form = new OgrafForm.SuperFlyTvOgrafDataForm();
form.addEventListener("onChange", (e) => {
console.log("Caught onChange event", JSON.stringify(e.detail));
// The onChange event is fired when a user changes a value in the form
form.addEventListener("change", (e) => {
console.log("Caught change event", e.target.value, e.detail);
// 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.detail.data, null, 2);
dataDiv.innerHTML = JSON.stringify(e.target.value, null, 2);
});
form.addEventListener("onKeyUp", (e) => {
console.log("Caught onKey event", JSON.stringify(e.detail));
// The onKeyUp event is fired on each key stroke in the form.
// e.detail.data contains the current data.
form.addEventListener("keyup", (e) => {
console.log("Caught keyup event", e.target.value, e.detail);
// The keyup event is fired on each key stroke in the form.
// e.target.value contains the current data.
});
form.schema = exampleSchema;
form.data = data;
form.value = data;

dataDiv.innerHTML = JSON.stringify(data, null, 2);

Expand Down
14 changes: 7 additions & 7 deletions examples/react.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,17 @@ export function OGrafForm({ schema, onDataChangeCallback }) {
// Set up listener for when the data has changed in the form:
React.useLayoutEffect(() => {
if (formRef.current) {
const listener = (e) => onDataChange(e.detail.data);
formRef.current.addEventListener("onChange", listener);
return () => formRef.current.removeEventListener("onChange", listener);
const listener = (e) => onDataChange(e.target.value);
formRef.current.addEventListener("change", listener);
return () => formRef.current.removeEventListener("change", listener);
}
});
// (Optional) Set up listener for whenever user is editing (ie every key)
// React.useLayoutEffect(() => {
// if (formRef.current) {
// const listener = (e) => onDataChange(e.detail.data);
// formRef.current.addEventListener("onKeyUp", listener);
// return () => formRef.current.removeEventListener("onKeyUp", listener);
// const listener = (e) => onDataChange(e.target.value);
// formRef.current.addEventListener("keyup", listener);
// return () => formRef.current.removeEventListener("keyup", listener);
// }
// });

Expand All @@ -38,7 +38,7 @@ export function OGrafForm({ schema, onDataChangeCallback }) {
<superflytv-ograf-form
ref={formRef}
schema={JSON.stringify(schema)}
data={JSON.stringify(data)}
value={JSON.stringify(data)}
></superflytv-ograf-form>
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions lib/components/gdd-elements/gdd-elements/color-rrggbb.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ export class GDDColorRRGGBB extends GDDInputBase {

this.elInput.onchange = (e) => {
if (!e.target) return;
this.emitOnChange((e.target as any).value);
this.emitChangeEvent((e.target as any).value);
};
}

this.elInput.value = this.data || "";
this.elInput.value = this.value || "";
this._renderStyle();
return initialRender;
}
Expand Down
19 changes: 13 additions & 6 deletions lib/components/gdd-elements/gdd-elements/color-rrggbbaa.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,24 +24,30 @@ export class GDDColorRRGGBBAA extends GDDColorRRGGBB {
this.elContentAlpha.onchange = (e) => {
if (!e.target) return;
if (!(e.target instanceof HTMLInputElement)) return;
e.stopPropagation();

const int = this._parseInput(e.target.value);
if (int === null) {
// invalid input, revert
e.target.value = `${this._alpha}` || "";
} else {
if (this.data !== int) {
if (this.value !== int) {
this._alpha = int;

this.emitOnChange(this.getRRGGBBAA(this._rrggbb, this._alpha));
this.emitChangeEvent(this.getRRGGBBAA(this._rrggbb, this._alpha));
}
e.target.value = `${int}`;
}
};

this.elContentAlpha.onkeydown = (e) => {
if (e.key === "Enter") {
e.preventDefault();
// Prevent form submission
}
if (!e.target) return;
this.emitOnKeyDown(

this.emitKeyDownEvent(
e,
(e.target as any).value,
(e.target as any).value
Expand All @@ -50,11 +56,12 @@ export class GDDColorRRGGBBAA extends GDDColorRRGGBB {
this.elContentAlpha.onkeyup = (e) => {
if (!e.target) return;
if (!(e.target instanceof HTMLInputElement)) return;
e.stopPropagation();

const int = this._parseInput(e.target.value);

if (int === null) return;
this.emitOnKeyUp(
this.emitKeyUpEvent(
e,
e.target.value,
this.getRRGGBBAA(this._rrggbb, int)
Expand All @@ -66,13 +73,13 @@ export class GDDColorRRGGBBAA extends GDDColorRRGGBB {

this._rrggbb = (e.target as any).value.replace("#", "");

this.emitOnChange(this.getRRGGBBAA(this._rrggbb, this._alpha));
this.emitChangeEvent(this.getRRGGBBAA(this._rrggbb, this._alpha));
};
}

if (!this.elContentAlpha) return initialRender;

const rrggbbaa = this.data || "#00000000";
const rrggbbaa = this.value || "#00000000";
this._rrggbb = rrggbbaa.slice(1, 7);
this._alpha = parseInt(rrggbbaa.slice(7, 9), 16) / 255;

Expand Down
17 changes: 1 addition & 16 deletions lib/components/gdd-elements/gdd-elements/file-path.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,9 @@ export class GDDFilePath extends GDDInputBase {
this.elInput.accept =
schema.gddOptions.extensions.map((e) => `.${e}`).join(",") || "*";
this.elInput.name = this.path;

// this.elInput.style.fontFamily = "monospace";

this.elInput.onchange = (e) => {
if (!e.target) return;
this.emitOnChange((e.target as any).value);
};
this.elInput.onkeydown = (e) => {
if (!e.target) return;
this.emitOnKeyDown(e, (e.target as any).value, (e.target as any).value);
};
this.elInput.onkeyup = (e) => {
if (!e.target) return;
this.emitOnKeyUp(e, (e.target as any).value, (e.target as any).value);
};
}

this.elInput.value = this.data || "";
this.elInput.value = this.value || "";
this._renderStyle();

return initialRender;
Expand Down
11 changes: 7 additions & 4 deletions lib/components/gdd-elements/gdd-elements/multiline-text.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,26 @@ export class GDDMultiLineText extends GDDElementBase {

this.elInput.onchange = (e) => {
if (!e.target) return;
this.emitOnChange((e.target as any).value);
if (!(e.target instanceof HTMLTextAreaElement)) return;
this.emitChangeEvent(e.target.value);
this._renderStyle();
};
this.elInput.onkeydown = (e) => {
if (!e.target) return;
this.emitOnKeyDown(e, (e.target as any).value, (e.target as any).value);
if (!(e.target instanceof HTMLTextAreaElement)) return;
this.emitKeyDownEvent(e, e.target.value, e.target.value);
};
this.elInput.onkeyup = (e) => {
if (!e.target) return;
this.emitOnKeyUp(e, (e.target as any).value, (e.target as any).value);
if (!(e.target instanceof HTMLTextAreaElement)) return;
this.emitKeyUpEvent(e, e.target.value, e.target.value);
this._renderStyle();
};
}

this.elInput.name = this.path;

this.elInput.value = this.data || "";
this.elInput.value = this.value || "";

this._renderStyle();
return initialRender;
Expand Down
6 changes: 5 additions & 1 deletion lib/components/gdd-elements/gdd-elements/percentage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ export class GDDPercentage extends GDDInputNumberBase {
this.elInput.type = "text";
const orgOnKeyDown = this.elInput.onkeydown;
this.elInput.onkeydown = (e) => {
if (e.key === "Enter") {
e.preventDefault();
// Prevent form submission
}
if (!this.elInput) return;

if (e.key === "ArrowUp" || e.key === "ArrowDown") {
Expand Down Expand Up @@ -75,7 +79,7 @@ export class GDDPercentage extends GDDInputNumberBase {
e.preventDefault();

if (this._isChanged) {
// because onChange is not emitted if we've only modified using arrow keys:
// because change is not emitted if we've only modified using arrow keys:
this.elInput?.onchange?.(e);
}
this._isChanged = false;
Expand Down
4 changes: 2 additions & 2 deletions lib/components/gdd-elements/gdd-elements/select.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export class GDDSelect extends GDDElementBase {

const option = this._options[(e.target as any).value];
if (option) {
this.emitOnChange(option.value);
this.emitChangeEvent(option.value);
}
};
}
Expand Down Expand Up @@ -69,7 +69,7 @@ export class GDDSelect extends GDDElementBase {
if (!(elOption instanceof HTMLOptionElement)) continue;
const option = this._options[elOption.getAttribute("value") || ""];
if (!option) continue;
elOption.selected = isEqual(this.data, option.value);
elOption.selected = isEqual(this.value, option.value);
}

this._renderStyle();
Expand Down
Loading