Skip to content

Commit 3fcf00b

Browse files
SamProfSamProf
committed
Upgrade MatSelect to mdc 6.0.0
1 parent 99aac12 commit 3fcf00b

File tree

10 files changed

+124
-136
lines changed

10 files changed

+124
-136
lines changed

‎README.md

+4
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,10 @@ If you think that this project helped you or your company in any way, you can co
117117
- `MatAutocomplete` - new implementation of component
118118

119119

120+
121+
#### MatBlazor 2.5.0
122+
- Update MDC-Web components to 6.0.0
123+
120124
#### MatBlazor 2.4.3
121125
- `MatVirtualScroll` - New component-
122126
- Added label color to theme primary color #488 (Thanks to [EduVencovsky](https://github.com/EduVencovsky))

‎src/MatBlazor.Demo.ServerApp/Properties/launchSettings.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"IIS Express": {
1212
"commandName": "IISExpress",
1313
"launchBrowser": true,
14-
"launchUrl": "",
14+
"launchUrl": "Select",
1515
"environmentVariables": {
1616
"ASPNETCORE_ENVIRONMENT": "Development"
1717
}

‎src/MatBlazor.Web/package.json

+28-28
Original file line numberDiff line numberDiff line change
@@ -16,34 +16,34 @@
1616
"author": "SamProf",
1717
"license": "MIT",
1818
"dependencies": {
19-
"@material/base": "4.0.0",
20-
"@material/button": "4.0.0",
21-
"@material/card": "4.0.0",
22-
"@material/checkbox": "4.0.0",
23-
"@material/chips": "4.0.0",
24-
"@material/data-table": "4.0.0",
25-
"@material/dialog": "4.0.0",
26-
"@material/drawer": "4.0.0",
27-
"@material/elevation": "4.0.0",
28-
"@material/fab": "4.0.0",
29-
"@material/form-field": "4.0.0",
30-
"@material/icon-button": "4.0.0",
31-
"@material/layout-grid": "4.0.0",
32-
"@material/linear-progress": "4.0.0",
33-
"@material/list": "4.0.0",
34-
"@material/menu": "4.0.0",
35-
"@material/radio": "4.0.0",
36-
"@material/ripple": "4.0.0",
37-
"@material/select": "4.0.0",
38-
"@material/slider": "4.0.0",
39-
"@material/snackbar": "4.0.0",
40-
"@material/switch": "4.0.0",
41-
"@material/tab-bar": "4.0.0",
42-
"@material/tab-scroller": "4.0.0",
43-
"@material/textfield": "4.0.0",
44-
"@material/theme": "4.0.0",
45-
"@material/top-app-bar": "4.0.0",
46-
"@material/typography": "4.0.0",
19+
"@material/base": "6.0.0",
20+
"@material/button": "6.0.0",
21+
"@material/card": "6.0.0",
22+
"@material/checkbox": "6.0.0",
23+
"@material/chips": "6.0.0",
24+
"@material/data-table": "6.0.0",
25+
"@material/dialog": "6.0.0",
26+
"@material/drawer": "6.0.0",
27+
"@material/elevation": "6.0.0",
28+
"@material/fab": "6.0.0",
29+
"@material/form-field": "6.0.0",
30+
"@material/icon-button": "6.0.0",
31+
"@material/layout-grid": "6.0.0",
32+
"@material/linear-progress": "6.0.0",
33+
"@material/list": "6.0.0",
34+
"@material/menu": "6.0.0",
35+
"@material/radio": "6.0.0",
36+
"@material/ripple": "6.0.0",
37+
"@material/select": "6.0.0",
38+
"@material/slider": "6.0.0",
39+
"@material/snackbar": "6.0.0",
40+
"@material/switch": "6.0.0",
41+
"@material/tab-bar": "6.0.0",
42+
"@material/tab-scroller": "6.0.0",
43+
"@material/textfield": "6.0.0",
44+
"@material/theme": "6.0.0",
45+
"@material/top-app-bar": "6.0.0",
46+
"@material/typography": "6.0.0",
4747
"babel-polyfill": "^6.26.0",
4848
"flatpickr": "^4.6.3",
4949
"install": "^0.13.0",

‎src/MatBlazor.Web/src/matSelect/matSelect.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,9 @@ export class MatSelect {
4242
// this.select.menu_.foundation_.handleMenuSurfaceOpened();
4343

4444

45-
hoistMenuToBody(this.select.menu_);
45+
// console.debug(this.select);
46+
// debugger;
47+
hoistMenuToBody(this.select.menu);
4648

4749

4850
this.select.value = value;

‎src/MatBlazor.Web/test.html

+66-91
Original file line numberDiff line numberDiff line change
@@ -34,113 +34,88 @@
3434
</style>
3535

3636

37-
<br/>
38-
<br/>
39-
<br/>
40-
<br/>
41-
<br/>
42-
<br/>
43-
<br/>
4437

45-
<div style="padding: 100px;height: 60px; max-height: 60px; overflow: auto;">
46-
47-
48-
</div>
38+
<div class="mdc-select mdc-select--outlined" id="ref">
39+
<div class="mdc-select__anchor" aria-labelledby="outlined-select-label">
40+
<span class="mdc-select__ripple"></span>
41+
<input type="text" disabled readonly id="demo-selected-text" class="mdc-select__selected-text">
42+
<i class="mdc-select__dropdown-icon"></i>
43+
<span class="mdc-notched-outline">
44+
<span class="mdc-notched-outline__leading"></span>
45+
<span class="mdc-notched-outline__notch">
46+
<span id="outlined-select-label" class="mdc-floating-label">Pick a Food Group</span>
47+
</span>
48+
<span class="mdc-notched-outline__trailing"></span>
49+
</span>
50+
</div>
4951

52+
<!-- Other elements from the select remain. -->
53+
<div class="mdc-select__menu mdc-menu mdc-menu-surface" role="listbox">
54+
<ul class="mdc-list">
55+
<li class="mdc-list-item mdc-list-item--selected" data-value="" aria-selected="true"></li>
56+
<li class="mdc-list-item" data-value="grains">
57+
<span class="mdc-list-item__text">
58+
Bread, Cereal, Rice, and Pasta
59+
</span>
60+
</li>
61+
<li class="mdc-list-item" data-value="vegetables">
62+
<span class="mdc-list-item__text">
63+
Vegetables
64+
</span>
65+
</li>
66+
<li class="mdc-list-item" data-value="fruit">
67+
<span class="mdc-list-item__text">
68+
Fruit
69+
</span>
70+
</li>
71+
</ul>
5072

51-
<div class="mdc-dialog"
52-
id="refDialog"
53-
role="alertdialog"
54-
aria-modal="true"
55-
aria-labelledby="my-dialog-title"
56-
aria-describedby="my-dialog-content">
57-
<div class="mdc-dialog__container">
58-
<div class="mdc-dialog__surface">
59-
<!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
60-
<h2 class="mdc-dialog__title" id="my-dialog-title"><!--
61-
-->Dialog Title<!--
62-
--></h2>
63-
<div class="mdc-dialog__content" id="my-dialog-content">
64-
Dialog body text goes here.
65-
66-
<div class="mdc-select" id="ref">
67-
<div class="mdc-select__anchor demo-width-class">
68-
<i class="mdc-select__dropdown-icon"></i>
69-
<div class="mdc-select__selected-text"></div>
70-
<span class="mdc-floating-label">Pick a Food Group</span>
71-
<div class="mdc-line-ripple"></div>
72-
</div>
73-
74-
<div class="mdc-select__menu mdc-menu mdc-menu-surface demo-width-class">
75-
<ul class="mdc-list">
76-
<li class="mdc-list-item mdc-list-item--selected" data-value="" aria-selected="true"></li>
77-
<li class="mdc-list-item" data-value="grains">
78-
Bread, Cereal, Rice, and Pasta
79-
</li>
80-
<li class="mdc-list-item mdc-list-item--disabled" data-value="vegetables"
81-
aria-selected="true"
82-
aria-disabled="true" role="option">
83-
Vegetables
84-
</li>
85-
<li class="mdc-list-item" data-value="fruit">
86-
Fruit
87-
</li>
88-
</ul>
89-
</div>
90-
</div>
91-
92-
</div>
93-
<footer class="mdc-dialog__actions">
94-
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="no">
95-
<span class="mdc-button__label">No</span>
96-
</button>
97-
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
98-
<span class="mdc-button__label">Yes</span>
99-
</button>
100-
</footer>
101-
</div>
10273
</div>
103-
<div class="mdc-dialog__scrim"></div>
10474
</div>
10575

10676

107-
<script type="text/javascript">
108-
10977

110-
class MDCSelectFoundation2 extends mdc.select.MDCSelectFoundation {
78+
<!--<div class="mdc-select demo-width-class" id="ref">-->
79+
<!-- <div class="mdc-select__anchor">-->
80+
<!-- <span class="mdc-select__ripple"></span>-->
81+
<!-- <input type="text" disabled readonly class="mdc-select__selected-text">-->
82+
<!-- <i class="mdc-select__dropdown-icon"></i>-->
83+
<!-- <span class="mdc-floating-label">Pick a Food Group</span>-->
84+
<!-- <span class="mdc-line-ripple"></span>-->
85+
<!-- </div>-->
86+
87+
<!-- <div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface&#45;&#45;fullwidth">-->
88+
<!-- <ul class="mdc-list">-->
89+
<!-- <li class="mdc-list-item mdc-list-item&#45;&#45;selected" data-value="" aria-selected="true"></li>-->
90+
<!-- <li class="mdc-list-item" data-value="grains">-->
91+
<!-- <span class="mdc-list-item__text">-->
92+
<!-- Bread, Cereal, Rice, and Pasta-->
93+
<!-- </span>-->
94+
<!-- </li>-->
95+
<!-- <li class="mdc-list-item" data-value="vegetables">-->
96+
<!-- <span class="mdc-list-item__text">-->
97+
<!-- Vegetables-->
98+
<!-- </span>-->
99+
<!-- </li>-->
100+
<!-- <li class="mdc-list-item" data-value="fruit">-->
101+
<!-- <span class="mdc-list-item__text">-->
102+
<!-- Fruit-->
103+
<!-- </span>-->
104+
<!-- </li>-->
105+
<!-- </ul>-->
106+
<!-- </div>-->
107+
<!--</div>-->
111108

112109

113-
}
114110

115-
var refDialog = document.getElementById('refDialog');
116-
var ref = document.getElementById('ref');
117-
// debugger;
118-
var c = new mdc.select.MDCSelect(ref);
119-
debugger;
120-
c.menu_.setIsHoisted(true);
121-
document.body.appendChild(c.menuElement_);
122-
// debugger;
123-
// c.menu_.setFixedPosition(true);
111+
<script type="text/javascript">
124112

125113

126-
var d = new mdc.dialog.MDCDialog(refDialog);
127-
setTimeout(() => {
128-
d.open();
129-
}, 1000);
130114

115+
var ref = document.getElementById('ref');
131116
// debugger;
117+
var c = new mdc.select.MDCSelect(ref);
132118

133-
// var oldOpenMenu = c.foundation_.adapter_.openMenu;
134-
// c.foundation_.adapter_.openMenu = function () {
135-
// console.log('openMenu');
136-
// c.menu_.setFixedPosition(true);
137-
// oldOpenMenu();
138-
// };
139-
140-
141-
// var tooltip = document.getElementById('tRef');
142-
//
143-
// new matBlazor.matTooltip.init(tooltip, ref);
144119

145120
</script>
146121

‎src/MatBlazor/Components/MatSelect/CoreMatOption.razor

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,7 @@
44

55

66
<li data-value="@StringValue()" class="@ClassMapper.AsString()" style="@StyleMapper.AsString()" @ref="Ref" @attributes="Attributes" Id="@Id" aria-disabled="@RenderAttributeAriaDisabled()" role="option">
7-
@ChildContent
7+
<span class="mdc-list-item__text">
8+
@ChildContent
9+
</span>
810
</li>

‎src/MatBlazor/Components/MatSelect/CoreMatSelect.razor

+16-11
Original file line numberDiff line numberDiff line change
@@ -8,34 +8,39 @@
88
<div class="@ClassMapper.AsString()" style="@StyleMapper.AsString()" @ref="Ref" id="@Id" @attributes="@Attributes">
99
<div class="mdc-select__anchor">
1010

11+
@if (!Outlined)
12+
{
13+
<span class="mdc-select__ripple"></span>
14+
}
15+
16+
<input type="text" disabled readonly class="mdc-select__selected-text @FieldClass">
17+
1118
@if (!HideDropDownIcon)
1219
{
1320
<i class="mdc-select__dropdown-icon"></i>
1421
}
1522

16-
<div class="mdc-select__selected-text @FieldClass"></div>
17-
18-
23+
1924
@if (Outlined)
2025
{
21-
<div class="mdc-notched-outline">
22-
<div class="mdc-notched-outline__leading"></div>
23-
<div class="mdc-notched-outline__notch">
26+
<span class="mdc-notched-outline">
27+
<span class="mdc-notched-outline__leading"></span>
28+
<span class="mdc-notched-outline__notch">
2429
@if (Label != null)
2530
{
26-
<span class="mdc-floating-label">@Label</span>
31+
<span id="outlined-select-label" class="mdc-floating-label">@Label</span>
2732
}
28-
</div>
29-
<div class="mdc-notched-outline__trailing"></div>
30-
</div>
33+
</span>
34+
<span class="mdc-notched-outline__trailing"></span>
35+
</span>
3136
}
3237
else
3338
{
3439
@if (Label != null)
3540
{
3641
<span class="mdc-floating-label">@Label</span>
3742
}
38-
<div class="mdc-line-ripple"></div>
43+
<span class="mdc-line-ripple"></span>
3944

4045
@if (Icon != null)
4146
{

‎src/MatBlazor/MatBlazor.csproj

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<Authors>Vladimir Samoilenko</Authors>
2121
<PackageIconUrl>https://raw.githubusercontent.com/SamProf/MatBlazor/master/content/icon.ico</PackageIconUrl>
2222
<Company>SamProf</Company>
23-
<VersionPrefix>2.4.3</VersionPrefix>
23+
<VersionPrefix>2.5.0</VersionPrefix>
2424
<AddRazorSupportForMvc>true</AddRazorSupportForMvc>
2525
</PropertyGroup>
2626

‎src/MatBlazor/wwwroot/dist/matBlazor.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/MatBlazor/wwwroot/dist/matBlazor.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)