voom-presenters 2.0.3 → 2.1.0
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/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
|