playbook_ui_docs 14.6.0.pre.rc.20 → 14.6.0.pre.rc.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb +30 -7
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md +0 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +39 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md +1 -0
- data/app/pb_kits/playbook/pb_form/docs/example.yml +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +3 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 97d5916f906fd4d09362bc88b5fa9471e48389c604e3ef327e17db941a8d8d6c
|
|
4
|
+
data.tar.gz: aa02637d4e6918965d3293e3d9e4455d35e3d2a0d7fac243eb8c011ffe42c37b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: d7c13724f20f4d2609132f499d81fbc4153cb9a534dd231067fbc7ccb86e4d284697069243d8950e220fc15f143781be8cfe131e32533d6fcc862620d2e2ac46
|
|
7
|
+
data.tar.gz: c626e8afc94d1e614bceacfa31bf64811e7baad095851df9fa0b82dc548bffb4175294ef3837a40efedeaa91eeee1e700f0334323938a6346913dd114ccdc5c0
|
|
@@ -1,13 +1,36 @@
|
|
|
1
1
|
<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-loading"} }) %>
|
|
2
2
|
|
|
3
|
-
<%= pb_rails("dialog", props: {
|
|
4
|
-
id:"dialog-loading",
|
|
5
|
-
size: "sm",
|
|
6
|
-
title: "Loading
|
|
7
|
-
text: "Make a loading request?",
|
|
8
|
-
cancel_button: "Cancel Button",
|
|
3
|
+
<%= pb_rails("dialog", props: {
|
|
4
|
+
id:"dialog-loading",
|
|
5
|
+
size: "sm",
|
|
6
|
+
title: "Loading Example",
|
|
7
|
+
text: "Make a loading request?",
|
|
8
|
+
cancel_button: "Cancel Button",
|
|
9
9
|
cancel_button_id: "cancel-button-loading",
|
|
10
|
-
confirm_button: "Okay",
|
|
10
|
+
confirm_button: "Okay",
|
|
11
11
|
confirm_button_id: "confirm-button-loading",
|
|
12
12
|
loading: true,
|
|
13
13
|
}) %>
|
|
14
|
+
|
|
15
|
+
<script>
|
|
16
|
+
const loadingButton = document.querySelector('[data-disable-with="Loading"]');
|
|
17
|
+
if (loadingButton) {
|
|
18
|
+
loadingButton.addEventListener("click", function() {
|
|
19
|
+
const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
|
|
20
|
+
const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
|
|
21
|
+
let currentClass = okayLoadingButton.className;
|
|
22
|
+
let cancelClass = cancelButton ? cancelButton.className : "";
|
|
23
|
+
|
|
24
|
+
setTimeout(function() {
|
|
25
|
+
okayLoadingButton.disabled = false;
|
|
26
|
+
okayLoadingButton.className = currentClass.replace("_disabled_loading", "_enabled");
|
|
27
|
+
|
|
28
|
+
if (cancelButton) {
|
|
29
|
+
cancelButton.disabled = false;
|
|
30
|
+
cancelButton.className = cancelClass.replace("_disabled", "_enabled");
|
|
31
|
+
}
|
|
32
|
+
}, 5000);
|
|
33
|
+
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
</script>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<%= pb_form_with(scope: :example, url: "", method: :get, loading: true) do |form| %>
|
|
2
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
|
3
|
+
|
|
4
|
+
<%= form.actions do |action| %>
|
|
5
|
+
<%= action.submit %>
|
|
6
|
+
<%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
|
|
7
|
+
<% end %>
|
|
8
|
+
<% end %>
|
|
9
|
+
|
|
10
|
+
<script>
|
|
11
|
+
const loadingForm = document.querySelector(".pb_form_loading")
|
|
12
|
+
if (loadingForm) {
|
|
13
|
+
loadingForm.addEventListener("submit", function(event) {
|
|
14
|
+
event.preventDefault();
|
|
15
|
+
|
|
16
|
+
const submitButton = event['submitter'];
|
|
17
|
+
const cancelButton = event['target'].querySelector('button[type="reset"]');
|
|
18
|
+
|
|
19
|
+
if (submitButton) {
|
|
20
|
+
let currentClass = submitButton.className;
|
|
21
|
+
let newClass = currentClass.replace("_disabled_loading", "_enabled");
|
|
22
|
+
|
|
23
|
+
let cancelClass = cancelButton ? cancelButton.className : "";
|
|
24
|
+
let newCancelClass = cancelClass.replace("_disabled", "_enabled");
|
|
25
|
+
|
|
26
|
+
setTimeout(function() {
|
|
27
|
+
submitButton.disabled = false;
|
|
28
|
+
submitButton.className = currentClass;
|
|
29
|
+
|
|
30
|
+
if (cancelButton) {
|
|
31
|
+
cancelButton.disabled = false;
|
|
32
|
+
cancelButton.className = cancelClass;
|
|
33
|
+
}
|
|
34
|
+
}, 5000);
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
</script>
|
|
39
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Pressing Submit will trigger a loading state where the button content is replaced by a spinner icon and the submit button will be disabled.
|