aurelia-ui-toolkits / aurelia-mdc-web Goto Github PK
View Code? Open in Web Editor NEWAurelia wrapper for Material Design (Web) Components
Home Page: https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/
License: MIT License
Aurelia wrapper for Material Design (Web) Components
Home Page: https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/
License: MIT License
I'm migrating form 3.x
to 7.1.2
and get the following error message when compiling:
SassError: Can't find stylesheet to import.
╷
60 │ @use '@material/switch/mdc-switch';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\styles\mdc.scss 60:1 @import
src\app.scss 22:9 root stylesheet
When I remove this line, the switch component keep unstyled.
//@use '@material/switch/mdc-switch';
@use '@material/switch';
I'm only including individual components
The documentation for Circular Progress, says to include:
@use '@material/circular-progress/mdc-circular-progress'; @use '@material/circular-progress'; @use "@aurelia-mdc-web/circular-progress";
However this results in the error.
SassError: There's already a module with namespace "circular-progress".
Do I need to include both packages @use '@material/circular-progress'; @use "@aurelia-mdc-web/circular-progress";
for the component to work correctly?
Version used:
"sass": "^1.26.11", "sass-loader": "^10.0.2", "@aurelia-mdc-web/circular-progress": "^1.1.4",
Slider does not allow a value below minimum to be set.
Slider allows values down to 0 to be set.
Maximum Limits works as expected.
From minChanged function in Slider
aurelia-mdc-web/packages/slider/src/mdc-slider.ts
Lines 48 to 52 in f0ee278
I assume this is due to the min attribute not being set on this.startInput
but not entirely sure
This happens because the view model is reused and options
is already set when the element is attached back
When I type into the lookup associated input and there is only one item to select I still have to select it in the menu.
Is it an option to have an 'auto-select' option in the lookup component that automatically select an item when the lookup options (loadOptions) return only one value?
Intention:
I have a form with a required
I have a problem to get validation implemented so that both controls behave in the same way.
What I would like is that if the control gets focus, the user does not fill in anything and moves to the next control then an error message is shown indicating that the field is required.
For a text field this works as expected. I have two ways of doing that:
required
attribute and an helper text with a validation
attribute;validate
binding behavior (without a helper text with a validation
attribute).For a select this only works in one way correctly
required
attribute and an helper text with a validation
attributeWith Aurelia validation this does not work as I would like it
validateOnChange
binding behavior the error is only shown the user if you first select a value and then clear the value.validate
binding behavior then the error is shown too early (when the menu is opened)Is there a way to use a select with Aurelia validation and the desired behavior?
I have implemented a lookup as an autocomplete as described in #2
But now I have a problem when I want to use a variable in the page view model for doing a back-end call.
Because the call to the options
function is made from the MdcLookup
component, the this pointer in my method in the page view model is pointing to the MdcLookup
component instead of the page view model.
So I cannot make use of any of the attributes or properties of the page view model.
https://gist.dumber.app/?gist=01ac584061194a3093bb58cec8bbe8a6
This is in aurelia-mdc-web v7.0.1.
When building, there is a deprecation warning about using forward slash for division (details below).
This was fixed in Material Components in this issue:
material-components/material-components-web#7158
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($svg-natural-width, icon-variables.$icon-size)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
194 │ width: $svg-natural-width / icon-variables.$icon-size * 100%;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@aurelia-mdc-web/expandable/_mixins.scss 194:14 @content
node_modules/@material/feature-targeting/_feature-targeting.scss 218:5 targets()
node_modules/@aurelia-mdc-web/expandable/_mixins.scss 193:5 -dropdown-icon-base()
node_modules/@aurelia-mdc-web/expandable/_mixins.scss 85:7 without-ripple()
node_modules/@aurelia-mdc-web/expandable/_mixins.scss 16:3 core-styles()
node_modules/@aurelia-mdc-web/expandable/mdc-expandable.scss 3:1 @forward
node_modules/@aurelia-mdc-web/expandable/_index.scss 1:1 @use
node_modules/@aurelia-mdc-web/all/mdc-all.scss 33:1 @forward
node_modules/@aurelia-mdc-web/all/_index.scss 1:1 @use
src/my-app.scss 7:1 root stylesheet
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($svg-natural-height, icon-variables.$icon-size)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
195 │ height: $svg-natural-height / icon-variables.$icon-size * 100%;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@aurelia-mdc-web/expandable/_mixins.scss 195:15 @content
node_modules/@material/feature-targeting/_feature-targeting.scss 218:5 targets()
node_modules/@aurelia-mdc-web/expandable/_mixins.scss 193:5 -dropdown-icon-base()
node_modules/@aurelia-mdc-web/expandable/_mixins.scss 85:7 without-ripple()
node_modules/@aurelia-mdc-web/expandable/_mixins.scss 16:3 core-styles()
node_modules/@aurelia-mdc-web/expandable/mdc-expandable.scss 3:1 @forward
node_modules/@aurelia-mdc-web/expandable/_index.scss 1:1 @use
node_modules/@aurelia-mdc-web/all/mdc-all.scss 33:1 @forward
node_modules/@aurelia-mdc-web/all/_index.scss 1:1 @use
src/my-app.scss 7:1 root stylesheet
Hi,
Is the development guide up to date as i'd like to contribute with a couple of bug fixes and features but i can't build a forked repo?
After cloning locally, my packages.json file doesn't contain any scripts section so when trying to follow step 5 - From the root of the project, run npm run refresh
to bootstrap lerna, i just get the general npm error: missing script: refresh.
Cheers,
Matt
As seen in: https://gist.dumber.app/?gist=81d9964a3ca5f034556281f25fd6ef2a loading the lookup data ansynchronous will results into error messages.
Is there a way to refresh programmatically or should the component handle optionsChanged()
?
Uncaught TypeError: Cannot read property 'checked' of undefined
at Object.isCheckboxAtRowIndexChecked (mdc-data-table.js?2efa:245)
at MDCDataTableFoundation.handleRowCheckboxChange (foundation.js?9ba6:183)
at MdcDataTable.handleRowCheckboxChange (mdc-data-table.js?2efa:104)
at MdcDataTable.handleEvent (mdc-data-table.js?2efa:160)
See example at https://github.com/swalters/aurelia-mdc-example
I am using the linear progress a lot. When it's open
attribute is initially true
and then becomes false
then the linear progress disappears.
When I set open
initially to false
then it is visible directly. So I cannot start with an invisible progress and let make visible at a later moment.
My use case is that when a user submits a form that the linear progress is shown while submitting the form. So it is not shown when the user is filling the form.
I tried to implement a "dark theme" by setting up the primary, secondary and background color like described here: https://material.io/develop/web/theming/color
But the $background
variable is ignored in aurelia-mdc and the application keeps still "light".
@use "@material/theme" with (
$primary: #f00,
$on-primary: #ff0,
$secondary: #f0f,
$on-secondary: #0ff,
$background: #333,
$surface: #aaa,
$on-surface: #0f0,
);
Version
2.0.0
View
<mdc-list nonInteractive="true">
<mdc-list-item>Hallo</mdc-list-item>
<mdc-list-item>Liebe</mdc-list-item>
<mdc-list-item>Welt</mdc-list-item>
</mdc-list>
Expected
Gist
https://gist.dumber.app/?gist=d4c7e911d2a42aca9a9f3e35ceba3587
https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/select
Notice that clicking the "API" tab does not switch to the API view.
Console spits out: TypeError: Cannot read property 'children' of undefined
When trying to import only the slider-component, ie @aurelia-mdc-web/slider
, it crashes the page where I use it with
HTML:
<mdc-slider min="0" max="120" value.bind="someData" name="test"></mdc-slider>
Console:
ERROR [app-router] Error: No Aurelia APIs are defined for the element: "DIV".
The debug shows that the plugins is configured properly
DEBUG [aurelia] Configured plugin @aurelia-mdc-web/slider.
If i install the @aurelia-mdc-web/all
-package however, the error goes away and everything works. Is there an additional package I need that's not documented?
Version
@aurelia-mdc-web/select
: 1.1.6
View
<mdc-select label="Status"
value.bind="_selectedStatus"
outlined="true"
>
<mdc-list>
<mdc-list-item repeat.for="status of _availableStatuses" value.bind="status">
<span>${status}</span>
</mdc-list-item>
</mdc-list>
</mdc-select>
ViewModel
activate(
params: any,
routeConfig: RouteConfig,
navInstruction: NavigationInstruction
) {
this._selectedStatus = "passed";
}
I'm not 100% sure if this is a bug but we've discovered that if you include a link in the trailing icon of the list-item the link is not clickable and doesn't work:
<mdc-list-item repeat.for="file of files" two-line disable-ripple.bind="disableRipple">
<mdc-icon mdc-list-item-leading>${file.icon}</mdc-icon>
<mdc-list-item-primary-text>${file.name}</mdc-list-item-primary-text>
<mdc-list-item-secondary-text>${file.addDate}</mdc-list-item-secondary-text>
<a href="#/list/examples" mdc-list-item-trailing="icon" aria-label="View more" title="More info">
<mdc-icon>info</mdc-icon>
</a>
</mdc-list-item>
In the past it was possible to embed a small link or icon in the list-item-meta markup - (now trailing) but not it seems the list-item takes over the child elements as well.
Let me know if there's a better way to achieve this.
Version:
"@aurelia-mdc-web/all": "^7.1.2",
I like to see an implementation of mdc-chips
. Is there any planning on this.
Great job, @MaximBalaganskiy!
Circular progress page fails on the examples site with the following error.
Uncaught (in promise) TypeError: Cannot read property 'toString' of undefined
at MdcSlider.beforeFoundationCreated (mdc-slider.ts:117)
at MdcSlider.attached (mdc-component.ts:22)
Intention:
Hi. I've created a minimal skeleton application with the main features:
I made it to quickly create new applications with basic needs: https://github.com/mreiche/aurelia-material-skeleton
I just want to know if you need that and if it's worth to link it here in the documentation?
With the upgrade to 3.0.0 I'm noticing that all the labels on my selects have disappeared.
I'm noticing the CSS culprit is .mdc-notched-outline--no-label .mdc-notched-outline__notch
went from padding: 0
to display: none
Following your example on the demo app, I notice that this style is not being applied to your select components with ones with labels. So I guess the next question to ask is why is that being applied to my selects that DO have a label.
Pre 3.0.0 this was not a problem.
Most of my selects are label.bind=
, and I did changing to just label="something"
to see if it was a binding/timing issue but that didn't seem to resolve the issue.
Below is an example block of code.
<div class="col mb-4" repeat.for="filter of filters">
<mdc-select change.delegate="filter.changeFunction($event)" label.bind="filter.label"
outlined class="select-default w-100" value.bind="filter.value">
<img src="${filter.iconPath}" mdc-select-icon>
<mdc-list>
<mdc-list-item repeat.for="option of filter.options" value.bind="option" class="text-white">
${option[filter.displayValue]}
</mdc-list-item>
</mdc-list>
</mdc-select>
</div>
Here is a screenshot of the aurelia inspector binding:
https://chicksgold.gyazo.com/3be0c301dab2ec5d1186d1b999809ab0
v2.0.7 Example:
https://chicksgold.gyazo.com/c8b0bc525d881f01c8584b3756e9457f
V3.0.0 Example:
https://chicksgold.gyazo.com/ee0c14dcf1aac5a9dd7adfd354121e5c
Date pickers don't seem to work in Chrome on Windows but they work in Firefox.
https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/text-field/examples
I am trying your components as an alternative to mine.
What I made myself is an autocomplete. For example you want to select a contact.; you type in some letters; a request is going to the backend to search for a name starting with those letter; and a menu is shown where you can select the right contact.
I have tried to use the lookup for that. I have set the options
field to a function that returns a list of contact depending on what you have typed in the input. I have a couple of problems with the current implementation.
Are you planning this kind of functionality in the lookup or do you see this as a separate autocomplete control?
I could of course make it myself, but if you already planned this, I am not going to. I can help you of course if you like.
Given: I'm on .../aurelia-mdc-web/#/radio/examples view.
When I click on "API" tab,
Then I expect to see an API description, but the Examples related view is still remaining on page.
see https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/chips/examples
You can still remove the chip flagged non-removable
In may app, I bind a flag to it
non-removable.bind="disabled"
disabled = true and chip can still be removed
Original mdc-tooltip supports using rich HTML in tooltip containers (https://github.com/material-components/material-components-web/blob/master/packages/mdc-tooltip/README.md) but this bridge doesn't seem to support this or it's not documented.
Video of what is happening: https://chicksgold.gyazo.com/37f338d9d9fef76712c8c28516713ff4
Version of aurelia-mdc: v8.0.1-au2
Code:
<mdc-expandable accordion>
<div slot="caption">Lorem ipsum dolor...</div>
Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo et. Diam phaedrum ei mea, quaeque
voluptaria efficiantur duo no. Eu adhuc veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per
an legere iriure blandit. Veri iisque accusamus an pri.
</mdc-expandable>
<mdc-expandable accordion>
<div slot="caption">Lorem ipsum dolor...</div>
Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo et. Diam phaedrum ei mea, quaeque
voluptaria efficiantur duo no. Eu adhuc veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per
an legere iriure blandit. Veri iisque accusamus an pri.
</mdc-expandable>
https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/getting-started
Just wanted to point out that you're yarn and npm scripts:
npm i @aurelia-mdc/all
They are incorrect. Should be
@aurelia-mdc-web/all
I have found this library super helpful to implement MDC in my Aurelia application, thanks for all the work! 👏
I'm relatively new to working with Aurelia and MDC but I've been able to follow most of the examples and use them on my Aurelia app. One thing I could not figure out from the examples is how to properly use Snackbars.
I can see that in the example section you call a method with click.delegate - for example:
<button mdc-button raised click.delegate="dismissIcon()">Dismiss Icon</button>
How exactly should I implement this method in my view-model to produce a Snackbar?
I upgraded from 5.1 to 7.1 and noticed that the font size of the list items in de drawer was increased from 14px to 16px.
They should be 14px (0.875rem). In the past this was done via de selector .mdc-drawer .mdc-list-item
.
But because of the mdc-list
changes it does not seem to work anymore.
Following the Getting Started guide with Aurelia MDC v1.1.4 on an empty Aurela v1.3.1 project (CLI bundler) with aurelia.use.plugin(PLATFORM.moduleName('@aurelia-mdc-web/all'))
causes au build
to fail due to missing package.json of aurelia-typed-observable-plugin. Manually installing the dependency with npm i aurelia-typed-observable-plugin
before the build resolves the issue.
Version
@aurelia-mdc-web/text-field
: 1.1.6
View
<mdc-layout-grid-cell span="12">
<mdc-text-field
label="Search"
outlined
fullwidth
value.bind="_searchQuery"
keydown.delegate="_filter() & debounce"
>
<mdc-icon mdc-text-field-icon leading>search</mdc-icon>
</mdc-text-field>
</mdc-layout-grid-cell>
I've tried passing a tooltip value on an element from a property in a variety of ways. Each case leaves the tooltip "undefined".
<button mdc-tooltip="${myProp}"></button>
<button mdc-tooltip.bind="myProp"></button>
<button mdc-tooltip="value: ${myProp};"></button>
<button mdc-tooltip="${'value: ' + myProp}"></button>
Anything else I can try, or know where a good place for a fix would be? Happy to look into it but I'm not seeing anything obvious in the tooltip package where value is getting used.
Pagination demo shows only 3 items despite apparent 35 items in array. Also does not update items when controls for page size or forward/back.
Since this HTML structure:
<mdc-form-field>
<button mdc-switch selected.bind="selected"></button>
<label>off/on</label>
</mdc-form-field>
Clicking the label doesn't change switch state anymore.
Even when I follow the documentation (https://material.io/components/switches/web#other-variants) and add id
/for
attributes.
<mdc-form-field>
<button mdc-switch selected.bind="selected" id="mySwitch"></button>
<label for="mySwitch">off/on</label>
</mdc-form-field>
I would expect, that labels are always clickable, when present in a mdc-form-field
container.
Version
@aurelia-mdc-web/select
: 1.1.6
View
<mdc-select label="Status"
value.bind="_selectedStatus"
change.delegate="_filter()"
outlined="true"
>
<mdc-list>
<mdc-list-item>(All)</mdc-list-item>
<mdc-list-item repeat.for="status of _availableStatuses"
value.bind="status"
>
<span>${status|statusName}</span>
</mdc-list-item>
</mdc-list>
</mdc-select>
ViewModel
private _filter() {
const queryParams:any = {};
if (this._selectedStatus) {
queryParams.status = this._selectedStatus;
}
queryParams.configurationMethods = this._configurationMethods;
console.log("filter", queryParams);
this.updateUrl(queryParams);
}
Hello dear,
I found a bug in the slider control when you change the limits and the current value is out of the new range, the control crashes and doesn't allow you to modify the value.
You could reproduce the error following the next steps:
Official example page: https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/slider/examples
Hi,
Couple of issues with data-tables sorting event and pagination needing to maintain the activePage property.
Also a couple of issues with focus events on the button and icon-button when disabled.
PR created for these fixes on Monday at: #60
Sorry for creating an issue but didn't know how to alert you to review the PR. Doesn't appear to be any way to notify you even if I tagged you in the PR comment.
Would be good to get a method of contacting you (email or something) when i create PRs, especially for features I’m working on, as I don't want to pollute the Issues section.
Cheers,
Matt
Based on the code here: https://github.com/aurelia-ui-toolkits/aurelia-mdc-web/blob/master/packages/text-field/src/mdc-text-field.ts#L162 it should not autocomplete if you supply nothing however it does appear that autocomplete is still functioning.
There is also no examples of this in the documentation and may be worth adding something to the demo site.
Also instead of just checking undefined, maybe also checking false and off. I highly suggesting checking for off
as that is native HTML verbage.
Hi,
I am using mdc-data-table and trying to render table rows for all the children of a collection of nested objects.
Using a normal table this would look something like this:
<tbody>
<template repeat.for="contract of contracts">
<tr as-element="compose" view="./contract/contract.html"></tr>
<template repeat.for="beneficiary of contract.beneficiaries">
<tr as-element="compose" view="./beneficiary/beneficiary.html"></tr>
<template repeat.for="service of beneficiary.services">
<tr as-element="compose" view="./service/service.html"></tr>
<template repeat.for="transactionLine of service.transactionLines">
<tr as-element="compose" view="./transaction-line/transaction-line.html"></tr>
</template>
</template>
</template>
</template>
</tbody>
If I try and emulate the same, but instead of using <tr>
's, I use <mdc-data-table-row>
's, the resulting <mdc-data-table-content>
in the rendered Aurelia view is completely empty.
Looking at the code in mdc-data-table.js, is see querySelector is failing to return any elements.
var rows = (_g = element.querySelectorAll('mdc-data-table-content>mdc-data-table-row')) !== null && _g !== void 0 ? _g : [];
Obviously the selector mdc-data-table-content>mdc-data-table-row
will not find anything as the selector uses immediate child whereas in my case I have a template element in between the content and row elements.
Any idea how I might achieve what I want?
Say I have a table like:
<mdc-data-table class="admin" busy.bind="busy">
<mdc-data-table-header>
<mdc-data-table-header-cell>
<mdc-checkbox></mdc-checkbox>
</mdc-data-table-header-cell>
</mdc-data-table-header>
<mdc-data-table-content>
<mdc-data-table-row repeat.for="row of rows">
<mdc-data-table-cell>
<mdc-checkbox checked.bind="row.__checked"></mdc-checkbox>
</mdc-data-table-cell>
</mdc-data-table-row>
</mdc-data-table-content>
</mdc-data-table>
The busy.bind="busy"
shows the loading indicator in 1.x aurelia mdc-web. However, in 2.0 it throws an error.
Uncaught (in promise) Error: MDCDataTable: Table container element not found.
at Object.getTableContainerHeight (mdc-data-table.js?0464:313)
at MDCDataTableFoundation.showProgress (foundation.js?9ba6:241)
at MdcDataTable.eval (mdc-data-table.js?0464:154)
at step (tslib.es6.js?9ab4:100)
at Object.eval [as next] (tslib.es6.js?9ab4:81)
at fulfilled (tslib.es6.js?9ab4:71)
Seems there is missing an element:
https://github.com/aurelia-ui-toolkits/aurelia-mdc-web/blob/master/packages/data-table/src/mdc-data-table.ts#L282
getTableContainerHeight: function () {
var tableContainer = _this.root.querySelector('.mdc-data-table__container');
if (!tableContainer) {
throw new Error('MDCDataTable: Table container element not found.');
}
// eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-explicit-any
return tableContainer.getBoundingClientRect().height;
},
Related commit/line:
material-components/material-components-web@c678a9d#diff-35d2793426fe28cc97d1b0cbb4feb6969a03a1d5e80003d8e3b13d6f25b9ba6fL264
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.