JSFiddle - React, Tailwind, and code Playground

by starikcetin

HTML

<head>
    <script type="module" src="https://unpkg.com/@paraboly/pwc-dynamic-form@latest/dist/pwc-dynamic-form/pwc-dynamic-form.esm.js"></script>
    <script nomodule src="https://unpkg.com/@paraboly/pwc-dynamic-form@latest/dist/pwc-dynamic-form/pwc-dynamic-form.js"></script>
  </head>

  <body>
    <pwc-dynamic-form id="example-form">
      <pwc-dynamic-form-content items='[
          {
            "type": "range", 
            "name": "range1", 
            "id": "range1", 
            "label": "range1-label",
            "min": 5,
            "max": 10,
            "value": 9
          },
          {
            "type": "text", 
            "name": "text1", 
            "id": "text1", 
            "label": "text1-label",
            "required": true,
            "style": { "color": "white", "background-color": "black" }
          },
          {
            "type": "number", 
            "name": "number1", 
            "id": "number1", 
            "label": "number1-label",
            "required": true
          },
          {
            "type": "checkbox", 
            "name": "cb1", 
            "id": "cb1", 
            "label": "cb1-label"
          },
          {
            "type": "select-single", 
            "name": "ss1", 
            "id": "ss1", 
            "label": "ss1-label", 
            "choices": [
              {
                "value": "superstar",
                "label": "Superstar",
                "selected": false,
                "disabled": false
              },
              {
                "value": "foo",
                "label": "bar",
                "selected": false,
                "disabled": false
              }
            ]
          },
          {
            "type": "select-multiple", 
            "name": "ms1", 
            "id": "ms1", 
            "label": "ms1-label", 
            "choices": [
              {
                "value": "superstar",
                "label": "Superstar",
               ...

JavaScript

document
        .querySelector("#get-values-button")
        .addEventListener("click", e => {
          document
            .querySelector("#example-form")
            .getFieldValues(true)
            .then(fieldValues => {
              console.log(fieldValues);
            });
        });

      document
        .querySelector("#example-form")
        .addEventListener("formChanged", e => console.log(e));

      document
        .querySelectorAll("pwc-dynamic-form-content").forEach(pdfc =>
          pdfc.addEventListener("fieldChanged", e => console.log(e)));