noccy/jsl
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix issues in readme examples.

Browse Source
This commit is contained in:
Chris
2025-09-20 23:07:57 +02:00
parent 6ba8860de9
commit 123231833d
1 changed files with 24 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
README.md
View File

@@ -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. 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. 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"); 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. 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(...) 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 ```javascript
import { dom, el } from "./dom.js"; 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. 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. 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"; import { JsonForm, TextField } from "./jsonform.js";
const productForm = new JsonForm(); const productForm = new JsonForm();
productForm.addRow() productForm.layout.addRow()
.append(new TextField({ label:"Product name", path:".product.name", width:70 }) .append(new TextField({ label:"Product name", path:".product.name", width:70 }))
.append({ label:"Price", path:".price" }); .append(new TextField({ label:"Price", path:".price" }));
myTargetEl.appendChild(productForm.dom()); myTargetEl.appendChild(productForm.dom());
@@ -129,4 +136,11 @@ productForm.model = {
}, },
price: "9.99" 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" }
``` ```