From 6e5282e42e8a70226aac3d5722f4b17aa168e9cf Mon Sep 17 00:00:00 2001
From: "Jason.Chuah" <jason.chuah@gbgplc.com>
Date: Thu, 13 Jul 2023 13:35:04 +0800
Subject: [PATCH 1/3] enhancement: update bootstrap

---
 index.html                              | 81 ++++++++++++-------------
 src/css/brutusin-json-forms.css         | 20 ++++++
 src/js/brutusin-json-forms-bootstrap.js |  4 +-
 3 files changed, 62 insertions(+), 43 deletions(-)
diff --git a/index.html b/index.html
index 7423331..02b2d6b 100644
--- a/index.html
+++ b/index.html
@@ -2,9 +2,9 @@
 <html>
     <head>
         <meta name=viewport content='width=560'>
-        <link rel="stylesheet" href='lib/bootstrap/css/bootstrap.min.css'/>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
         <link rel="stylesheet" href="lib/codemirror/codemirror.css">
-        <link rel="stylesheet" href="lib/bootstrap-select/css/bootstrap-select.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" integrity="sha512-ARJR74swou2y0Q2V9k0GbzQ/5vJ2RBSoCWokg4zkfM29Fb3vZEQyv0iWBMW/yvKgyHSR/7D64pFMmU8nYmbRkg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
         <link rel="stylesheet" href="lib/octicons/octicons.css">
         <link rel="stylesheet" href='src/css/brutusin-json-forms.css'/>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
@@ -18,13 +18,13 @@
             }
         </style>
 
-        <script src='lib/jquery-1.11.3.min.js'></script>
-        <script src='lib/bootstrap/js/bootstrap.min.js'></script>
+        <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
         <script src="lib/codemirror/codemirror.js"></script>
         <script src="lib/codemirror/codemirror-javascript.js"></script>
         <script src="lib/markdown.min.js"></script>
-        <script src="lib/bootstrap-select/js/bootstrap-select.min.js"></script>
-        <script src="lib/bootstrap-select/js/i18n/defaults-en_US.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.14/js/bootstrap-select.min.js" integrity="sha512-CJXg3iK9v7yyWvjk2npXkQjNQ4C1UES1rQaNB7d7ZgEVX2a8/2BmtDmtTclW4ial1wQ41cU34XPxOw+6xJBmTQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.14/js/i18n/defaults-en_US.min.js" integrity="sha512-29UqgjaGxHyaEq1vJw4Q20iw6gBOMJDEUud/MNhXrJK6avCLukZ3eQf93AG7dywglnx21FoBvmHHBzP32O2YUw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
         <!--
         <script src="//rawgit.com/brutusin/json-forms/master/dist/js/brutusin-json-forms.min.js"></script>
          -->
@@ -222,17 +222,18 @@ <h1><img alt="Butusin" src="https://avatars0.githubusercontent.com/u/10341159?v=
                 <p>Source code and documentation available at <a href="https://github.com/brutusin/json-forms"><span class="octicon octicon-logo-github"></span></a></p>
                 <p>Originally created for <a href="http://rpc.brutusin.org">Brutusin-RPC</a>. See who else is using it <a href="https://github.com/brutusin/json-forms/blob/master/WHO-IS-USING.md">here</a>.</p>
             </blockquote>
-            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
-                <div class="panel panel-primary">
-                    <div class="panel-heading" role="tab" id="headingOne">
-                        <h4 class="panel-title">
-                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseInput" aria-expanded="true" aria-controls="collapseInput">
-                                Input
-                            </a>
-                        </h4>
+            <div class="accordion" id="accordion">
+                <div class="card">
+                    <div class="card-header">
+                        <h2 class="mb-0">
+                            <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseInput" aria-expanded="true" aria-controls="collapseInput">
+                            Input
+                            </button>
+                        </h2>
                     </div>
-                    <div id="collapseInput" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
-                        <div class="panel-body">
+
+                    <div id="collapseInput" class="collapse show" data-parent="#accordion">
+                        <div class="card-body">
                             <label for="examples">Predefined examples:</label>
                             <select class="form-control" id="examples" onchange="document.location.hash = this.selectedIndex;">
                                 <script>
@@ -243,43 +244,41 @@ <h4 class="panel-title">
                             </select>
                             <br>
                             <ul class="nav nav-tabs" role="tablist">
-                                <li role="presentation" class="active"><a href="#schema" aria-controls="schema" role="tab" data-toggle="tab">Schema</a></li>
-                                <li role="presentation"><a href="#data" aria-controls="data" role="tab" data-toggle="tab">Initial data</a></li>
-                                <li role="presentation"><a href="#resolver" aria-controls="resolver" role="tab" data-toggle="tab">Schema resolver</a></li>
+                                <li class="nav-item" role="presentation"><button class="nav-link active" id="schema-tab" type="button" data-toggle="tab" data-target="#schema" aria-controls="schema" role="tab" aria-selected="true">Schema</a></li>
+                                <li class="nav-item" role="presentation"><button class="nav-link" id="data-tab" type="button" data-toggle="tab" data-target="#data" aria-controls="data" role="tab" aria-selected="false">Initial data</a></li>
+                                <li class="nav-item" role="presentation"><button class="nav-link" id="resolver-tab" type="button" data-toggle="tab" data-target="#resolver" aria-controls="resolver" role="tab" aria-selected="false">Schema resolver</a></li>
                             </ul>
                             <!-- Tab panes -->
                             <div class="tab-content">
-                                <div role="tabpanel" class="tab-pane active" id="schema"></div>
-                                <div role="tabpanel" class="tab-pane" id="data"></div>
-                                <div role="tabpanel" class="tab-pane" id="resolver"></div>
+                                <div role="tabpanel" class="tab-pane fade active show" id="schema" role="tabpanel" aria-labelledby="schema-tab"></div>
+                                <div role="tabpanel" class="tab-pane fade " id="data" role="tabpanel" aria-labelledby="data-tab"></div>
+                                <div role="tabpanel" class="tab-pane fade " id="resolver" role="tabpanel" aria-labelledby="resolver-tab"></div>
                             </div>
                             <div class="alert alert-danger in" role="alert" id="jsonAlert" style="display:none">
                                 <a href="#" onclick='$("#jsonAlert").hide();' class="close" >&times;</a>
                                 <strong>Error!</strong> <span id="error-message"></span>
                             </div>
-
-                        </div>
-
-                        <div class="panel-footer">
-                            <button class="btn btn-primary" onclick="generateForm()">Create form</button> 
+                            <button class="btn btn-primary mt-3" onclick="generateForm()">Create form</button>
                         </div>
                     </div>
                 </div>
-                <div class="panel panel-primary">
-                    <div class="panel-heading" role="tab" id="headingTwo">
-                        <h4 class="panel-title">
-                            <a class="collapsed" id="formLink" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseForm" aria-expanded="false" aria-controls="collapseForm">
+                <div class="card">
+                    <div class="card-header">
+                        <h2 class="mb-0">
+                            <button class="btn btn-link btn-block text-left collapsed" id="formLink" type="button" data-toggle="collapse" data-target="#collapseForm" aria-expanded="false" aria-controls="collapseForm">
                                 Generated form
-                            </a>
-                        </h4>
+                            </button>
+                        </h2>
                     </div>
-                    <div id="collapseForm" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
-                        <div class="alert alert-info" role="alert"><strong id="example-title"></strong><div id="example-desc"></div></div>
-                        <div id='container' style="padding-left:12px;padding-right:12px;padding-bottom: 12px;"></div>
-                        <div class="panel-footer">
-                            <button class="btn btn-primary" onclick="alert(JSON.stringify(bf.getData(), null, 4))">getData()</button>&nbsp;<button class="btn btn-primary" onclick="if (bf.validate()) {
-                                        alert('Validation succeeded')
-                                    }">validate()</button>
+                    <div id="collapseForm" class="collapse" data-parent="#accordion">
+                        <div class="card-body">
+                            <div class="alert alert-secondary" role="alert"><strong id="example-title"></strong><div id="example-desc"></div></div>
+                            <div id='container' style="padding-left:12px;padding-right:12px;padding-bottom: 12px;"></div>
+                            <div class="panel-footer">
+                                <button class="btn btn-primary" onclick="alert(JSON.stringify(bf.getData(), null, 4))">getData()</button>&nbsp;<button class="btn btn-primary" onclick="if (bf.validate()) {
+                                            alert('Validation succeeded')
+                                        }">validate()</button>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -294,7 +293,7 @@ <h4 class="panel-title">
                 mode: "javascript",
                 lineNumbers: true
             });
-            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+            $('button[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                 selectedTab = $(e.target).attr("aria-controls");
                 var pt = $(e.relatedTarget);
                 var prevTab;
diff --git a/src/css/brutusin-json-forms.css b/src/css/brutusin-json-forms.css
index 4e1290c..f0a97ba 100644
--- a/src/css/brutusin-json-forms.css
+++ b/src/css/brutusin-json-forms.css
@@ -15,6 +15,9 @@
  * 
  * @author Ignacio del Valle Alles idelvall@brutusin.org
  */
+a, a:hover, a:visited, a:active, a:focus {
+    text-decoration: none !important;
+}
 .add-pattern-div{
     margin-top: 6px;
 }
@@ -115,6 +118,23 @@ form.brutusin-form .error {
 form.brutusin-form .error-message {
     color: red;
 }
+.brutusin-form .dropdown.bootstrap-select.form-control {
+    width: 100% !important;
+}
+.brutusin-form .bootstrap-select>.dropdown-toggle {
+    height: calc(1.5em + .75rem + 2px);
+    border: 1px solid #ced4da;
+    border-radius: 0.25rem;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+.container {
+    padding-top: 10px;
+    padding-bottom: 30px;
+}
+blockquote {
+    border-left: 0.5rem solid #dedede;
+    padding-left: 20px;
+}
 
 .brutusin-card {
     position: relative;
diff --git a/src/js/brutusin-json-forms-bootstrap.js b/src/js/brutusin-json-forms-bootstrap.js
index 734fea2..ced6893 100644
--- a/src/js/brutusin-json-forms-bootstrap.js
+++ b/src/js/brutusin-json-forms-bootstrap.js
@@ -36,7 +36,7 @@ if (("undefined" === typeof $ || "undefined" === typeof $.fn || "undefined" ===
             if (tagName === "input" && (element.type !== "checkbox" && element.type !== "radio") || tagName === "textarea") {
                 element.className += " form-control";
             } else if (tagName === "select") {
-                element.className += " chosen-select form-control";
+                element.className += " form-control";
             } else if (tagName === "button") {
                 if (element.className === "remove") {
                     element.className += " glyphicon glyphicon-remove";
@@ -66,7 +66,7 @@ if (("undefined" === typeof $ || "undefined" === typeof $.fn || "undefined" ===
                     divCard.innerHTML = "<div class='brutusin-card-header'><a id='expand-btn' class='btn btn-link' data-toggle='collapse' data-target='#brutusin-form-collapsible' aria-expanded='true' aria-controls='brutusin-form-collapsible'></a></div>";
 
                     var divCardBody = document.createElement("div");
-                    divCardBody.className = "collapse in";
+                    divCardBody.className = "collapse show";
                     divCardBody.id = "brutusin-form-collapsible";
                     divCardBody.setAttribute("aria-expanded", "true");
                     divCardBody.appendChild(parentElement);

From aaeb21be39beb74f2010689e984f40d1a88bd209 Mon Sep 17 00:00:00 2001
From: "Jason.Chuah" <jason.chuah@gbgplc.com>
Date: Fri, 14 Jul 2023 00:20:22 +0800
Subject: [PATCH 2/3] add missing comma

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 02b2d6b..7b411fb 100644
--- a/index.html
+++ b/index.html
@@ -120,7 +120,7 @@
                 {"$schema":"http://json-schema.org/draft-03/schema#","type":"object","properties":{"radio1":{"type":"boolean","format":"radio","title":"Animal","required":true,"enum":["Dog","Cat","Bird"]},"checkbox":{"type":"boolean","format":"checkbox","title":"Transportation","required":true,"enum":["Vehicle","Airplane","Cruise"]}}},
                     null,
                     null,
-                    "Boolean supporting radio and checkbox type. Must define `format` and `enum` fields."]
+                    "Boolean supporting radio and checkbox type. Must define `format` and `enum` fields."],
                 ["Additional input type format",
                     {"$schema":"http://json-schema.org/draft-03/schema#","type":"object","properties":{"password":{"title":"Password","type":"string","format":"password","description":"Password field would have the text masked.","required":true},"email":{"title":"Email","type":"string","format":"email","description":"Email field would need to follow the format of name@domain.com in order to pass the validation.","required":true},"date":{"title":"Date","type":"string","format":"date","description":"Use the date picker to pick the date.","required":true},"time":{"title":"Time","type":"string","format":"time","description":"Use the time picker to pick the time.","required":true}}},
                     null,

From d67c19ad7f43df85e54d7fd1c526307e7a6a5903 Mon Sep 17 00:00:00 2001
From: "Jason.Chuah" <jason.chuah@gbgplc.com>
Date: Fri, 14 Jul 2023 02:07:24 +0800
Subject: [PATCH 3/3] update css

---
 src/css/brutusin-json-forms.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/css/brutusin-json-forms.css b/src/css/brutusin-json-forms.css
index f0a97ba..e782d1b 100644
--- a/src/css/brutusin-json-forms.css
+++ b/src/css/brutusin-json-forms.css
@@ -127,6 +127,9 @@ form.brutusin-form .error-message {
     border-radius: 0.25rem;
     transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
 }
+.brutusin-form.form-inline label {
+    justify-content: end;
+}
 .container {
     padding-top: 10px;
     padding-bottom: 30px;
