voom-presenters 2.0.3 → 2.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +8 -2
- data/app/demo/components/multi_selects.pom +29 -0
- data/app/demo/components/nav/menu.pom +1 -0
- data/app/demo/components/selects.pom +2 -1
- data/lib/voom/presenters/dsl/components/mixins/selects.rb +6 -0
- data/lib/voom/presenters/dsl/components/multi_select.rb +56 -0
- data/lib/voom/presenters/dsl/components/select.rb +0 -3
- data/lib/voom/presenters/version.rb +1 -1
- data/public/bundle.css +85 -50
- data/public/bundle.js +1205 -1048
- data/public/wc.js +795 -638
- data/views/mdc/assets/js/components/initialize.js +2 -0
- data/views/mdc/assets/js/components/multi-select.js +75 -0
- data/views/mdc/assets/scss/app.scss +1 -0
- data/views/mdc/assets/scss/components/multi-select.scss +44 -0
- data/views/mdc/components/multi_select.erb +33 -0
- data/views/mdc/package-lock.json +6 -6
- metadata +7 -2
|
@@ -32,6 +32,7 @@ import {initTooltips} from './tooltip';
|
|
|
32
32
|
import {initPlugins} from './plugins';
|
|
33
33
|
import {initProgress} from './progress';
|
|
34
34
|
import {initDragAndDrop} from './drag_n_drop';
|
|
35
|
+
import {initMultiSelects} from "./multi-select";
|
|
35
36
|
|
|
36
37
|
export function initialize(root, setRoot) {
|
|
37
38
|
console.debug('Initializing components');
|
|
@@ -71,6 +72,7 @@ export function initialize(root, setRoot) {
|
|
|
71
72
|
initTooltips(root);
|
|
72
73
|
initPlugins(root);
|
|
73
74
|
initDragAndDrop(root);
|
|
75
|
+
initMultiSelects(root);
|
|
74
76
|
|
|
75
77
|
// This needs to be last, because it relies on the components installed above.
|
|
76
78
|
initEvents(root);
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import {MDCNotchedOutline} from '@material/notched-outline';
|
|
2
|
+
import {hookupComponentsManually} from './base-component';
|
|
3
|
+
|
|
4
|
+
export function initMultiSelects(root) {
|
|
5
|
+
console.debug('\tMultiSelects');
|
|
6
|
+
hookupComponentsManually(root, '.v-multi-select-container', function(element) {
|
|
7
|
+
return new VMultiSelect(root, element);
|
|
8
|
+
});
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export class VMultiSelect {
|
|
12
|
+
|
|
13
|
+
constructor(root, element) {
|
|
14
|
+
this.vComponent = root.vComponent;
|
|
15
|
+
this.element = element;
|
|
16
|
+
this.setEventListeners();
|
|
17
|
+
this.setLabelHandlers();
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
setEventListeners() {
|
|
21
|
+
this.element.addEventListener('click', createToggleHandler(this.element));
|
|
22
|
+
document.addEventListener('click', createCloseHandler(this.element));
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
setLabelHandlers() {
|
|
26
|
+
createValueDescriptionHandler(this.element);
|
|
27
|
+
setCurrentValueDescription(this.element);
|
|
28
|
+
setLabelNotch(this.element);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
function createToggleHandler(component) {
|
|
33
|
+
return function (event) {
|
|
34
|
+
if (!event.target.classList.contains('v-multi-select--option')) {
|
|
35
|
+
component.querySelector('.v-multi-select--options-list').classList.toggle('v-hidden');
|
|
36
|
+
component.classList.toggle('mdc-select--focused');
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
function createCloseHandler(component) {
|
|
42
|
+
return function (event) {
|
|
43
|
+
if (!event.target.className.match(/[\w-]*v-multi-select[\w-]*/g)) {
|
|
44
|
+
component.querySelector('.v-multi-select--options-list').classList.add('v-hidden');
|
|
45
|
+
component.classList.remove('mdc-select--focused');
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
function createValueDescriptionHandler(component) {
|
|
51
|
+
const listElements = component.querySelectorAll('.v-multi-select--option');
|
|
52
|
+
for (let element of listElements) {
|
|
53
|
+
element.addEventListener('change', function(e){
|
|
54
|
+
setCurrentValueDescription(component);
|
|
55
|
+
})
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
function setCurrentValueDescription(component) {
|
|
60
|
+
const selectedElements = Array.from(component.querySelectorAll('.v-multi-select--option')).filter((e) => e.checked );
|
|
61
|
+
let msg = selectedElements.length + ' selected';
|
|
62
|
+
if (selectedElements.length === 1 && selectedElements[0].labels.length === 1) {
|
|
63
|
+
msg = selectedElements[0].labels[0].innerText;
|
|
64
|
+
}
|
|
65
|
+
component.querySelector('.v-multi-select--current-values').innerText = msg;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
function setLabelNotch(component) {
|
|
69
|
+
const labelWidth = component.querySelector('.mdc-floating-label').offsetWidth * .75;
|
|
70
|
+
const notchedOutline = new MDCNotchedOutline(component.querySelector('.mdc-notched-outline'));
|
|
71
|
+
notchedOutline.notch(labelWidth);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
.v-multi-select-container {
|
|
2
|
+
.v-multi-select--options-list {
|
|
3
|
+
position: absolute;
|
|
4
|
+
width: 100%;
|
|
5
|
+
top: 71px;
|
|
6
|
+
border: 1px solid #C2C2C2;
|
|
7
|
+
border-radius: 4px;
|
|
8
|
+
background-color: #FFFFFF;
|
|
9
|
+
z-index: 1;
|
|
10
|
+
overflow: visible;
|
|
11
|
+
> div {
|
|
12
|
+
display: block;
|
|
13
|
+
text-align: left;
|
|
14
|
+
label {
|
|
15
|
+
line-height: 3em;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.v-multi-select {
|
|
21
|
+
@extend .mdc-select;
|
|
22
|
+
@extend .v-select;
|
|
23
|
+
overflow: visible;
|
|
24
|
+
background-color: #FFFFFF;
|
|
25
|
+
.v-multi-select--current-values {
|
|
26
|
+
padding: 19px;
|
|
27
|
+
overflow: hidden;
|
|
28
|
+
}
|
|
29
|
+
&:not(.mdc-select--disabled) {
|
|
30
|
+
background-color: #FFFFFF;
|
|
31
|
+
}
|
|
32
|
+
&:hover {
|
|
33
|
+
background: transparent;
|
|
34
|
+
.mdc-notched-outline .mdc-notched-outline__leading,
|
|
35
|
+
.mdc-notched-outline .mdc-notched-outline__notch,
|
|
36
|
+
.mdc-notched-outline .mdc-notched-outline__trailing {
|
|
37
|
+
border-color: rgba(0, 0, 0, 0.87);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
.mdc-select:before {
|
|
42
|
+
background-color: transparent;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<% if comp
|
|
2
|
+
float_label = comp.options.select{|o| o.selected }.any?
|
|
3
|
+
%>
|
|
4
|
+
<div class="v-multi-select-container"
|
|
5
|
+
<% if comp.tag %>data-input-tag="<%= comp.tag %>"<% end %>
|
|
6
|
+
<% if comp.dirtyable %>data-dirtyable<% end %>>
|
|
7
|
+
<div class="v-multi-select--options-list v-hidden">
|
|
8
|
+
<% comp.options.each do |option| %>
|
|
9
|
+
<%= erb :"components/checkbox", :locals => {comp: option.checkbox, class_name: 'v-multi-select--option'} %>
|
|
10
|
+
<% end %>
|
|
11
|
+
</div>
|
|
12
|
+
<div class="mdc-select v-multi-select v-input
|
|
13
|
+
<%= 'mdc-select--outlined' if comp.outlined %>
|
|
14
|
+
<% if comp.disabled %>mdc-select--disabled<% end %>"
|
|
15
|
+
<%= 'style="width: 100%;"' if comp.full_width %>
|
|
16
|
+
<%= erb(:"components/event", locals: {comp: comp,
|
|
17
|
+
events: comp.events,
|
|
18
|
+
parent_id: "#{comp.id}-input"}) %>>
|
|
19
|
+
<%= erb :"components/icon", :locals => {comp: comp.icon, class_name: 'mdc-select__icon', parent_id: "#{comp.id}-input", size_class: '', position: []} %>
|
|
20
|
+
<div class="v-multi-select--current-values"></div>
|
|
21
|
+
<i class="mdc-select__dropdown-icon v-multi-select--options-toggle"></i>
|
|
22
|
+
<div class="mdc-notched-outline mdc-notched-outline--upgraded mdc-notched-outline--notched">
|
|
23
|
+
<div class="mdc-notched-outline__leading"></div>
|
|
24
|
+
<div class="mdc-notched-outline__notch">
|
|
25
|
+
<label class="mdc-floating-label <%= 'mdc-floating-label--float-above' if float_label %>"><%= comp.label %></label>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="mdc-notched-outline__trailing"></div>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
<%= erb :"components/shared/hint_error_display", :locals => {comp: comp} %>
|
|
31
|
+
<%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
|
|
32
|
+
</div>
|
|
33
|
+
<% end %>
|
data/views/mdc/package-lock.json
CHANGED
|
@@ -8220,7 +8220,7 @@
|
|
|
8220
8220
|
},
|
|
8221
8221
|
"pify": {
|
|
8222
8222
|
"version": "2.3.0",
|
|
8223
|
-
"resolved": "
|
|
8223
|
+
"resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
|
|
8224
8224
|
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
|
|
8225
8225
|
"dev": true
|
|
8226
8226
|
},
|
|
@@ -14137,7 +14137,7 @@
|
|
|
14137
14137
|
},
|
|
14138
14138
|
"minimist": {
|
|
14139
14139
|
"version": "1.2.0",
|
|
14140
|
-
"resolved": "
|
|
14140
|
+
"resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
|
|
14141
14141
|
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
|
|
14142
14142
|
"dev": true
|
|
14143
14143
|
}
|
|
@@ -15260,7 +15260,7 @@
|
|
|
15260
15260
|
},
|
|
15261
15261
|
"pify": {
|
|
15262
15262
|
"version": "2.3.0",
|
|
15263
|
-
"resolved": "
|
|
15263
|
+
"resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
|
|
15264
15264
|
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
|
|
15265
15265
|
"dev": true
|
|
15266
15266
|
},
|
|
@@ -15565,7 +15565,7 @@
|
|
|
15565
15565
|
},
|
|
15566
15566
|
"yargs": {
|
|
15567
15567
|
"version": "3.10.0",
|
|
15568
|
-
"resolved": "
|
|
15568
|
+
"resolved": "http://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
|
|
15569
15569
|
"integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
|
|
15570
15570
|
"dev": true,
|
|
15571
15571
|
"requires": {
|
|
@@ -15810,7 +15810,7 @@
|
|
|
15810
15810
|
"dependencies": {
|
|
15811
15811
|
"minimist": {
|
|
15812
15812
|
"version": "1.2.0",
|
|
15813
|
-
"resolved": "
|
|
15813
|
+
"resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
|
|
15814
15814
|
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
|
|
15815
15815
|
"dev": true
|
|
15816
15816
|
}
|
|
@@ -16430,7 +16430,7 @@
|
|
|
16430
16430
|
},
|
|
16431
16431
|
"yargs": {
|
|
16432
16432
|
"version": "11.1.0",
|
|
16433
|
-
"resolved": "
|
|
16433
|
+
"resolved": "http://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz",
|
|
16434
16434
|
"integrity": "sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A==",
|
|
16435
16435
|
"dev": true,
|
|
16436
16436
|
"requires": {
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: voom-presenters
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 2.0
|
|
4
|
+
version: 2.1.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Russell Edens
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: exe
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2021-03-
|
|
11
|
+
date: 2021-03-17 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: ice_nine
|
|
@@ -349,6 +349,7 @@ files:
|
|
|
349
349
|
- app/demo/components/layouts.pom
|
|
350
350
|
- app/demo/components/lists.pom
|
|
351
351
|
- app/demo/components/menus.pom
|
|
352
|
+
- app/demo/components/multi_selects.pom
|
|
352
353
|
- app/demo/components/nav/drawer.pom
|
|
353
354
|
- app/demo/components/nav/menu.pom
|
|
354
355
|
- app/demo/components/nav/pattern_drawer.pom
|
|
@@ -523,6 +524,7 @@ files:
|
|
|
523
524
|
- lib/voom/presenters/dsl/components/mixins/tooltips.rb
|
|
524
525
|
- lib/voom/presenters/dsl/components/mixins/typography.rb
|
|
525
526
|
- lib/voom/presenters/dsl/components/mixins/yield_to.rb
|
|
527
|
+
- lib/voom/presenters/dsl/components/multi_select.rb
|
|
526
528
|
- lib/voom/presenters/dsl/components/number_field.rb
|
|
527
529
|
- lib/voom/presenters/dsl/components/page.rb
|
|
528
530
|
- lib/voom/presenters/dsl/components/page_title.rb
|
|
@@ -688,6 +690,7 @@ files:
|
|
|
688
690
|
- views/mdc/assets/js/components/mixins/dirtyable.js
|
|
689
691
|
- views/mdc/assets/js/components/mixins/event-handler.js
|
|
690
692
|
- views/mdc/assets/js/components/mixins/visibility-observer.js
|
|
693
|
+
- views/mdc/assets/js/components/multi-select.js
|
|
691
694
|
- views/mdc/assets/js/components/plugins.js
|
|
692
695
|
- views/mdc/assets/js/components/progress.js
|
|
693
696
|
- views/mdc/assets/js/components/radios.js
|
|
@@ -734,6 +737,7 @@ files:
|
|
|
734
737
|
- views/mdc/assets/scss/components/image.scss
|
|
735
738
|
- views/mdc/assets/scss/components/list.scss
|
|
736
739
|
- views/mdc/assets/scss/components/menu.scss
|
|
740
|
+
- views/mdc/assets/scss/components/multi-select.scss
|
|
737
741
|
- views/mdc/assets/scss/components/progress.scss
|
|
738
742
|
- views/mdc/assets/scss/components/radio.scss
|
|
739
743
|
- views/mdc/assets/scss/components/rich-text-area.scss
|
|
@@ -832,6 +836,7 @@ files:
|
|
|
832
836
|
- views/mdc/components/list/menu.erb
|
|
833
837
|
- views/mdc/components/list/separator.erb
|
|
834
838
|
- views/mdc/components/menu.erb
|
|
839
|
+
- views/mdc/components/multi_select.erb
|
|
835
840
|
- views/mdc/components/number_field.erb
|
|
836
841
|
- views/mdc/components/overline.erb
|
|
837
842
|
- views/mdc/components/page_title.erb
|