ui_bibz 4.0.0.beta16 → 4.0.0.beta17
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/Gemfile.lock +117 -106
- data/app/assets/javascripts/forms/nested-dropdown.js +102 -0
- data/app/assets/javascripts/forms.js +157 -115
- data/app/assets/javascripts/interfaces.js +37 -28
- data/app/assets/stylesheets/sass/_forms.sass +6 -5
- data/app/assets/stylesheets/sass/forms/_dropdown.sass +5 -0
- data/config/importmap.rb +20 -19
- data/lib/ui_bibz/concerns/models/searchable.rb +1 -1
- data/lib/ui_bibz/infos.rb +1 -1
- data/lib/ui_bibz/inputs/ui_bibz_inputs/string_input.rb +1 -1
- data/lib/ui_bibz/ui/core/component.rb +1 -3
- data/lib/ui_bibz/ui/core/forms/dropdowns/components/dropdown_dropdown.rb +158 -0
- data/lib/ui_bibz/ui/core/forms/dropdowns/dropdown.rb +5 -0
- data/lib/ui_bibz/ui/core/navigations/link.rb +1 -1
- data/lib/ui_bibz/ui/ux/tables/components/store.rb +16 -48
- data/lib/ui_bibz/ui/ux/tables/extensions/actionable.rb +2 -2
- data/lib/ui_bibz/ui/ux/tables/extensions/paginable.rb +1 -1
- data/lib/ui_bibz/ui/ux/tables/extensions/searchable.rb +1 -1
- data/lib/ui_bibz/ui/ux/tables/table_card.rb +1 -3
- metadata +4 -2
@@ -1,160 +1,202 @@
|
|
1
|
-
import UiBibzFormula from
|
2
|
-
import
|
3
|
-
import "input-connected"
|
4
|
-
import "jquery.multi-select"
|
5
|
-
import "bootstrap-multiselect"
|
6
|
-
import extendMultiselect from "jquery.multi-select-extend"
|
7
|
-
import "bootstrap-markdown"
|
8
|
-
import
|
9
|
-
import "bootstrap-datepicker.min.js"
|
1
|
+
import UiBibzFormula from "formula";
|
2
|
+
import "bootstrap-switch";
|
3
|
+
import "input-connected";
|
4
|
+
import "jquery.multi-select";
|
5
|
+
import "bootstrap-multiselect";
|
6
|
+
import extendMultiselect from "jquery.multi-select-extend";
|
7
|
+
import "bootstrap-markdown";
|
8
|
+
import "fuzzysort";
|
9
|
+
import "bootstrap-datepicker.min.js";
|
10
|
+
import "nested-dropdown";
|
10
11
|
|
11
12
|
export default class UiBibzForm {
|
12
|
-
|
13
13
|
constructor(node) {
|
14
|
-
this.node = node || document
|
15
|
-
if(node.querySelector(
|
16
|
-
|
14
|
+
this.node = node || document;
|
15
|
+
if (node.querySelector("input.switch-field")) {
|
16
|
+
this.setBootstrapSwitch();
|
17
|
+
}
|
18
|
+
if (node.querySelector(".ui-bibz-connect")) {
|
19
|
+
this.inputConnected();
|
20
|
+
}
|
17
21
|
//if(node.querySelector('.dropdown-select-field')) { this.setMultiSelect() }
|
18
|
-
if(node.querySelector(
|
19
|
-
|
20
|
-
|
21
|
-
if(node.querySelector(
|
22
|
-
|
23
|
-
|
22
|
+
if (node.querySelector(".multi-select-field")) {
|
23
|
+
this.setMultiSelect();
|
24
|
+
}
|
25
|
+
if (node.querySelector(".multi-column-field")) {
|
26
|
+
this.setMultiColumn();
|
27
|
+
}
|
28
|
+
if (node.querySelector(".formula-field")) {
|
29
|
+
this.formula();
|
30
|
+
}
|
31
|
+
if (node.querySelector(".auto-complete-field")) {
|
32
|
+
this.autoCompleteFix();
|
33
|
+
}
|
34
|
+
if (node.querySelector(".slider")) {
|
35
|
+
this.doubleSlider();
|
36
|
+
}
|
37
|
+
if (node.querySelector(".dropdown-select-field")) {
|
38
|
+
this.selectpicker();
|
39
|
+
}
|
24
40
|
}
|
25
41
|
|
26
42
|
inputConnected() {
|
27
|
-
$(
|
43
|
+
$(".ui-bibz-connect", this.node).inputConnected();
|
28
44
|
}
|
29
45
|
|
30
46
|
setSelectPicker() {
|
31
|
-
$(
|
47
|
+
$("select.dropdown-select-field", this.node).selectpicker();
|
32
48
|
}
|
33
49
|
|
34
50
|
setBootstrapSwitch() {
|
35
|
-
$(
|
36
|
-
size:
|
37
|
-
})
|
51
|
+
$("input.switch-field", this.node).bootstrapSwitch({
|
52
|
+
size: "large",
|
53
|
+
});
|
38
54
|
}
|
39
55
|
|
40
56
|
setMultiSelect() {
|
41
|
-
$(
|
42
|
-
var classes, data
|
43
|
-
data = $(this).data()
|
44
|
-
classes = $(this)[0].classList.value
|
45
|
-
delete data["multiselect"]
|
46
|
-
data = Object.assign(
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
57
|
+
$("select.multi-select-field", this.node).each(function () {
|
58
|
+
var classes, data;
|
59
|
+
data = $(this).data();
|
60
|
+
classes = $(this)[0].classList.value;
|
61
|
+
delete data["multiselect"];
|
62
|
+
data = Object.assign(
|
63
|
+
{
|
64
|
+
buttonClass: "btn " + classes,
|
65
|
+
},
|
66
|
+
data,
|
67
|
+
);
|
68
|
+
$(this).multiselect(data);
|
69
|
+
if ($(this).parent().hasClass("input-group")) {
|
70
|
+
$(this).siblings(".btn-group").addClass("input-group-btn");
|
52
71
|
}
|
53
|
-
})
|
72
|
+
});
|
54
73
|
}
|
55
74
|
|
56
75
|
formula() {
|
57
|
-
let me = this
|
58
|
-
let formula_input_fields = $(
|
76
|
+
let me = this;
|
77
|
+
let formula_input_fields = $(".formula-field", this.node);
|
59
78
|
|
60
|
-
formula_input_fields.each(function() {
|
61
|
-
me.updateFormulaField($(this))
|
62
|
-
})
|
79
|
+
formula_input_fields.each(function () {
|
80
|
+
me.updateFormulaField($(this));
|
81
|
+
});
|
63
82
|
|
64
|
-
formula_input_fields.on(
|
65
|
-
me.updateFormulaField($(this))
|
66
|
-
})
|
83
|
+
formula_input_fields.on("keyup", function () {
|
84
|
+
me.updateFormulaField($(this));
|
85
|
+
});
|
67
86
|
}
|
68
87
|
|
69
88
|
updateFormulaField(field) {
|
70
|
-
let error,
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
89
|
+
let error,
|
90
|
+
f,
|
91
|
+
formulaAlert,
|
92
|
+
formulaInputField,
|
93
|
+
formulaResultField,
|
94
|
+
formulaSignField,
|
95
|
+
response,
|
96
|
+
result;
|
97
|
+
formulaInputField = field;
|
98
|
+
formulaSignField = formulaInputField.siblings(".formula-field-sign");
|
99
|
+
formulaResultField = formulaInputField.siblings(".formula-field-result");
|
100
|
+
formulaAlert = formulaInputField.siblings(".formula-field-alert");
|
101
|
+
f = new UiBibzFormula();
|
102
|
+
result = f.go(formulaInputField.val());
|
103
|
+
error = result[0];
|
104
|
+
response = result[1];
|
79
105
|
|
80
106
|
if (!!error) {
|
81
|
-
formulaAlert.attr(
|
82
|
-
formulaAlert.attr(
|
83
|
-
formulaResultField.addClass(
|
107
|
+
formulaAlert.attr("data-original-title", error);
|
108
|
+
formulaAlert.attr("style", "display: table-cell");
|
109
|
+
formulaResultField.addClass("fix-border-right");
|
84
110
|
} else {
|
85
|
-
formulaAlert.hide()
|
86
|
-
formulaResultField.val(eval(response))
|
87
|
-
formulaResultField.removeClass(
|
111
|
+
formulaAlert.hide();
|
112
|
+
formulaResultField.val(eval(response));
|
113
|
+
formulaResultField.removeClass("fix-border-right");
|
88
114
|
}
|
89
115
|
if (isNaN(response)) {
|
90
|
-
formulaSignField.attr(
|
91
|
-
formulaResultField.attr(
|
92
|
-
formulaInputField.addClass(
|
116
|
+
formulaSignField.attr("style", "display: table-cell");
|
117
|
+
formulaResultField.attr("style", "display: table-cell; visible: visible");
|
118
|
+
formulaInputField.addClass("fix-border-right");
|
93
119
|
} else {
|
94
|
-
formulaSignField.hide()
|
95
|
-
formulaResultField.attr(
|
96
|
-
formulaInputField.removeClass(
|
120
|
+
formulaSignField.hide();
|
121
|
+
formulaResultField.attr("style", "visible: hidden");
|
122
|
+
formulaInputField.removeClass("fix-border-right");
|
97
123
|
}
|
98
124
|
}
|
99
125
|
|
100
126
|
setMultiColumn() {
|
101
|
-
$.fn.multiSelect.defaults = extendMultiselect
|
102
|
-
$(".multi-column-field", this.node).multiSelect()
|
127
|
+
$.fn.multiSelect.defaults = extendMultiselect;
|
128
|
+
$(".multi-column-field", this.node).multiSelect();
|
103
129
|
}
|
104
130
|
|
105
131
|
autoCompleteFix() {
|
106
|
-
$(".auto-complete-field", this.node).each(function() {
|
107
|
-
var lastChild, parent, radius
|
108
|
-
parent = $(this).parent(
|
132
|
+
$(".auto-complete-field", this.node).each(function () {
|
133
|
+
var lastChild, parent, radius;
|
134
|
+
parent = $(this).parent(".input-group");
|
109
135
|
if (parent.length > 0) {
|
110
|
-
lastChild = parent.children().last()
|
111
|
-
if (lastChild.is(
|
112
|
-
radius = parent.children().first().css("border-bottom-left-radius")
|
113
|
-
$(this).css("border-bottom-right-radius", radius)
|
114
|
-
$(this).css("border-top-right-radius", radius)
|
136
|
+
lastChild = parent.children().last();
|
137
|
+
if (lastChild.is("datalist")) {
|
138
|
+
radius = parent.children().first().css("border-bottom-left-radius");
|
139
|
+
$(this).css("border-bottom-right-radius", radius);
|
140
|
+
$(this).css("border-top-right-radius", radius);
|
115
141
|
}
|
116
142
|
}
|
117
|
-
})
|
143
|
+
});
|
118
144
|
}
|
119
145
|
|
120
|
-
doubleSlider(){
|
121
|
-
let me = this
|
122
|
-
this.node.querySelectorAll(".slider").forEach(function(e){
|
123
|
-
let slider = e
|
124
|
-
let sliderId = slider.getAttribute("id")
|
125
|
-
let sliderMin = me.node.querySelector(
|
126
|
-
|
127
|
-
|
128
|
-
let
|
129
|
-
|
130
|
-
|
131
|
-
let
|
132
|
-
let
|
133
|
-
let
|
134
|
-
let
|
135
|
-
let
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
146
|
+
doubleSlider() {
|
147
|
+
let me = this;
|
148
|
+
this.node.querySelectorAll(".slider").forEach(function (e) {
|
149
|
+
let slider = e;
|
150
|
+
let sliderId = slider.getAttribute("id");
|
151
|
+
let sliderMin = me.node.querySelector(
|
152
|
+
`.slider-header[data-target=${sliderId}] .slider-header-min span`,
|
153
|
+
);
|
154
|
+
let sliderMax = me.node.querySelector(
|
155
|
+
`.slider-header[data-target=${sliderId}] .slider-header-max span`,
|
156
|
+
);
|
157
|
+
let rangeInput1 = slider.querySelectorAll("input[type=range]")[0];
|
158
|
+
let rangeInput2 = slider.querySelectorAll("input[type=range]")[1];
|
159
|
+
let inverseLeft = slider.querySelector(".slider-inverse-left");
|
160
|
+
let inverseRight = slider.querySelector(".slider-inverse-right");
|
161
|
+
let range = slider.querySelector(".slider-range");
|
162
|
+
let thumbLeft = slider.querySelector(".slider-thumb-left");
|
163
|
+
let thumbRight = slider.querySelector(".slider-thumb-right");
|
164
|
+
let signLeft = slider.querySelector(".slider-sign-left");
|
165
|
+
let signRight = slider.querySelector(".slider-sign-right");
|
166
|
+
|
167
|
+
rangeInput1.addEventListener("input", function (e) {
|
168
|
+
this.value = Math.min(this.value, rangeInput2.value - 1);
|
169
|
+
let value =
|
170
|
+
(100 / (parseInt(this.max) - parseInt(this.min))) *
|
171
|
+
parseInt(this.value) -
|
172
|
+
(100 / (parseInt(this.max) - parseInt(this.min))) *
|
173
|
+
parseInt(this.min);
|
174
|
+
value = value + 0.01 * value;
|
175
|
+
|
176
|
+
inverseLeft.style.width = `${value}%`;
|
177
|
+
range.style.left = `${value}%`;
|
178
|
+
thumbLeft.style.left = `${value}%`;
|
179
|
+
if (sliderMin) {
|
180
|
+
sliderMin.innerHTML = this.value;
|
181
|
+
}
|
182
|
+
});
|
183
|
+
|
184
|
+
rangeInput2.addEventListener("input", function (e) {
|
185
|
+
this.value = Math.max(this.value, rangeInput1.value - -1);
|
186
|
+
let value =
|
187
|
+
(100 / (parseInt(this.max) - parseInt(this.min))) *
|
188
|
+
parseInt(this.value) -
|
189
|
+
(100 / (parseInt(this.max) - parseInt(this.min))) *
|
190
|
+
parseInt(this.min);
|
191
|
+
value = value + 0.01 * value;
|
192
|
+
|
193
|
+
inverseRight.style.width = `${100 - value}%`;
|
194
|
+
range.style.right = `${100 - value}%`;
|
195
|
+
thumbRight.style.left = `${value}%`;
|
196
|
+
if (sliderMax) {
|
197
|
+
sliderMax.innerHTML = this.value;
|
198
|
+
}
|
199
|
+
});
|
200
|
+
});
|
159
201
|
}
|
160
202
|
}
|
@@ -1,56 +1,65 @@
|
|
1
1
|
// Import non minified version, later minifier will make sure minified version
|
2
2
|
// is provided, while still allowing debugging to use the non minified version.
|
3
3
|
// import bootstrap from "bootstrap/dist/js/bootstrap.bundle"
|
4
|
-
import "@popperjs/core"
|
5
|
-
import "bootstrap"
|
6
|
-
import * as bootstrap from
|
7
|
-
window.bootstrap = bootstrap
|
4
|
+
import "@popperjs/core";
|
5
|
+
import "bootstrap";
|
6
|
+
import * as bootstrap from "bootstrap";
|
7
|
+
window.bootstrap = bootstrap;
|
8
8
|
|
9
9
|
export default class UiBibzInterface {
|
10
|
-
|
11
10
|
constructor(node) {
|
12
|
-
this.node = node || document
|
11
|
+
this.node = node || document;
|
13
12
|
|
14
13
|
// //this.nav()
|
15
|
-
this.tooltip()
|
14
|
+
this.tooltip();
|
16
15
|
// this.dropdown()
|
17
|
-
this.popover()
|
18
|
-
this.notify()
|
19
|
-
this.toast()
|
16
|
+
this.popover();
|
17
|
+
this.notify();
|
18
|
+
this.toast();
|
20
19
|
}
|
21
20
|
|
22
|
-
nav(){
|
23
|
-
this.node
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
21
|
+
nav() {
|
22
|
+
this.node
|
23
|
+
.querySelectorAll(".nav-tabs .nav-item .nav-link")
|
24
|
+
.forEach(function (el) {
|
25
|
+
let tabTrigger = new bootstrap.Tab(el);
|
26
|
+
el.addEventListener("click", function (e) {
|
27
|
+
e.preventDefault();
|
28
|
+
tabTrigger.show();
|
29
|
+
});
|
30
|
+
});
|
30
31
|
}
|
31
32
|
|
32
33
|
popover() {
|
33
|
-
this.node
|
34
|
+
this.node
|
35
|
+
.querySelectorAll('[data-bs-toggle="popover"]')
|
36
|
+
.forEach((x) => new bootstrap.Popover(x));
|
34
37
|
}
|
35
38
|
|
36
39
|
tooltip() {
|
37
|
-
this.node
|
40
|
+
this.node
|
41
|
+
.querySelectorAll('[data-bs-toggle="tooltip"]')
|
42
|
+
.forEach((x) => new bootstrap.Tooltip(x));
|
38
43
|
}
|
39
44
|
|
40
45
|
dropdown() {
|
41
|
-
this.node
|
46
|
+
this.node
|
47
|
+
.querySelectorAll('[data-bs-toggle="dropdown"]')
|
48
|
+
.forEach((x) => new bootstrap.Dropdown(x));
|
42
49
|
}
|
43
50
|
|
44
51
|
toast() {
|
45
|
-
this.node.querySelectorAll(
|
52
|
+
this.node.querySelectorAll(".toast").forEach((x) => new bootstrap.Toast(x));
|
46
53
|
}
|
47
54
|
|
48
55
|
notify() {
|
49
|
-
new bootstrap.Alert(
|
50
|
-
this.node
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
56
|
+
new bootstrap.Alert(".myAlert");
|
57
|
+
this.node
|
58
|
+
.querySelectorAll(".alert[data-timeout]")
|
59
|
+
.forEach(function (alertElement) {
|
60
|
+
setTimeout(function () {
|
61
|
+
alertElement.classList.add("fade");
|
62
|
+
}, alertElement.getAttribute("data-timeout"));
|
63
|
+
});
|
55
64
|
}
|
56
65
|
}
|
@@ -1,9 +1,10 @@
|
|
1
|
+
@import forms/_bootstrap_select
|
1
2
|
@import forms/_button
|
3
|
+
@import forms/_combobox
|
4
|
+
@import forms/_dropdown
|
5
|
+
@import forms/_form_check
|
6
|
+
@import forms/_formula_field
|
7
|
+
@import forms/_multiselect
|
2
8
|
@import forms/_range
|
3
9
|
@import forms/_slider
|
4
|
-
@import forms/_bootstrap_select
|
5
|
-
@import forms/_multiselect
|
6
|
-
@import forms/_formula_field
|
7
10
|
@import forms/_surround_field
|
8
|
-
@import forms/_form_check
|
9
|
-
@import forms/combobox
|
data/config/importmap.rb
CHANGED
@@ -1,21 +1,22 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
-
pin '@popperjs/core', to: 'https://unpkg.com/@popperjs/core@2.11.2/dist/esm/index.js'
|
4
|
-
pin 'bootstrap', to: 'https://ga.jspm.io/npm:bootstrap@5.3.3/dist/js/bootstrap.esm.js'
|
5
|
-
pin 'jquery', to: 'jquery-3.7.0.min.js'
|
6
|
-
pin 'bootstrap-multiselect', to: 'bootstrap-multiselect.min.js'
|
7
|
-
pin 'bootstrap-switch', to: 'bootstrap-switch.min.js'
|
8
|
-
pin 'fuzzysort', to: 'fuzzysort.js'
|
9
|
-
pin 'jquery.multi-select', to: 'jquery.multi-select.min.js'
|
10
|
-
pin 'bootstrap-markdown', to: 'bootstrap-markdown.js'
|
11
|
-
pin 'bootstrap-datepicker.min.js', to: 'bootstrap-datepicker.min.js'
|
12
|
-
pin 'bootstrap-switch', to: 'bootstrap-switch.min.js'
|
13
|
-
pin 'jquery.quicksearch', to: 'jquery.quicksearch.min.js'
|
14
|
-
pin 'forms', to: 'forms.js'
|
15
|
-
pin 'interfaces', to: 'interfaces.js'
|
16
|
-
pin 'tables', to: 'tables.js'
|
17
|
-
pin 'formula', to: 'forms/formula.js'
|
18
|
-
pin 'input-connected', to: 'forms/input-connected.js'
|
19
|
-
pin 'jquery.multi-select-extend', to: 'forms/jquery.multi-select-extend.js'
|
20
|
-
pin 'debounce', to: 'debounce.js'
|
21
|
-
pin 'controllers/combobox_controller', to: 'controllers/combobox_controller.js'
|
3
|
+
pin '@popperjs/core', to: 'https://unpkg.com/@popperjs/core@2.11.2/dist/esm/index.js' # use unpkg.com as ga.jspm.io contains a broken popper package
|
4
|
+
pin 'bootstrap', to: 'https://ga.jspm.io/npm:bootstrap@5.3.3/dist/js/bootstrap.esm.js'
|
5
|
+
pin 'jquery', to: 'jquery-3.7.0.min.js'
|
6
|
+
pin 'bootstrap-multiselect', to: 'bootstrap-multiselect.min.js'
|
7
|
+
pin 'bootstrap-switch', to: 'bootstrap-switch.min.js'
|
8
|
+
pin 'fuzzysort', to: 'fuzzysort.js'
|
9
|
+
pin 'jquery.multi-select', to: 'jquery.multi-select.min.js'
|
10
|
+
pin 'bootstrap-markdown', to: 'bootstrap-markdown.js'
|
11
|
+
pin 'bootstrap-datepicker.min.js', to: 'bootstrap-datepicker.min.js'
|
12
|
+
pin 'bootstrap-switch', to: 'bootstrap-switch.min.js'
|
13
|
+
pin 'jquery.quicksearch', to: 'jquery.quicksearch.min.js'
|
14
|
+
pin 'forms', to: 'forms.js'
|
15
|
+
pin 'interfaces', to: 'interfaces.js'
|
16
|
+
pin 'tables', to: 'tables.js'
|
17
|
+
pin 'formula', to: 'forms/formula.js'
|
18
|
+
pin 'input-connected', to: 'forms/input-connected.js'
|
19
|
+
pin 'jquery.multi-select-extend', to: 'forms/jquery.multi-select-extend.js'
|
20
|
+
pin 'debounce', to: 'debounce.js'
|
21
|
+
pin 'controllers/combobox_controller', to: 'controllers/combobox_controller.js'
|
22
|
+
pin 'nested-dropdown', to: 'forms/nested-dropdown.js'
|
@@ -172,7 +172,7 @@ module UiBibz::Concerns::Models::Searchable
|
|
172
172
|
|
173
173
|
# If there's several table in the same page
|
174
174
|
def self.good_store_id?
|
175
|
-
@params[:store_id].nil?
|
175
|
+
@params[:store_id].nil? || store_id == @params[:store_id]
|
176
176
|
end
|
177
177
|
|
178
178
|
def self.new_search?
|
data/lib/ui_bibz/infos.rb
CHANGED