diff --git a/README.md b/README.md index 853bf68..2d532e1 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,16 @@ This is a collection of libraries that make working with JavaScript and data. Each component is available in it's own file, and example/default stylesheets are available in separate files. -## date.js +## Installing -**WORK IN PROGRESS!** +For now, clone this somewhere and copy the files to your project. Hopefully [Symfony Issue #53999](https://github.com/symfony/symfony/issues/53999) will be completed soon, in which case you will hopefully be able to import JSL using the AssetMapper CLI commands. + +## Components + +### date.js + +> [!WARNING] +> **WORK IN PROGRESS! MOSTLY NOT WORKING!** This component makes working with dates less of a pain. @@ -31,7 +38,7 @@ const custom = date("2025-09-01 15:00:42 +02:00"); let ts = now.format("Y-m-d H:i:s P"); ``` -## dialog.js +### dialog.js This component creates dialogs on the fly, and resolves a promise when the dialog is accepted. @@ -60,9 +67,9 @@ dialog.msgbox("Ready!").then( dialog.select("Put in warehouse", "Select", { "none":"None", "1":"WH1", "2":"WH2" }).then(...) ``` -## dom.js +### dom.js -This file offers `dom` and `el` that can be used to manipulate the DOM. +This component offers `dom` and `el` that can be used to manipulate the DOM. ```javascript import { dom, el } from "./dom.js"; @@ -83,7 +90,7 @@ dom.append(myDiv, [ ]); ``` -## json.js +### json.js This component contains tools to query and update data structures using simplified JSON paths. @@ -109,7 +116,7 @@ jsonQuery(items, "[].name") // → [ "cheese", "wine" ] ``` -## jsonform.js +### jsonform.js This component not only builds forms and allow you to map it against paths in a model dataset, but it also allows you to do inline editing of your data, with type mapping. @@ -117,9 +124,9 @@ This component not only builds forms and allow you to map it against paths in a import { JsonForm, TextField } from "./jsonform.js"; const productForm = new JsonForm(); -productForm.addRow() - .append(new TextField({ label:"Product name", path:".product.name", width:70 }) - .append({ label:"Price", path:".price" }); +productForm.layout.addRow() + .append(new TextField({ label:"Product name", path:".product.name", width:70 })) + .append(new TextField({ label:"Price", path:".price" })); myTargetEl.appendChild(productForm.dom()); @@ -129,4 +136,11 @@ productForm.model = { }, price: "9.99" }; + +// make it possible to edit the form +productForm.editable = true; + +// when the user is done editing set editable = false and access the updated model +productForm.editable = false; +const newModel = productForm.model; // → { product:{ name:"Swedish Fish" }, price:"8.99" } ```