tochoromero / aurelia-bootstrap Goto Github PK
View Code? Open in Web Editor NEWBootstrap Components for Aurelia
Home Page: https://tochoromero.github.io/aurelia-bootstrap/
License: MIT License
Bootstrap Components for Aurelia
Home Page: https://tochoromero.github.io/aurelia-bootstrap/
License: MIT License
I'd like to apply custom styling to some of the tooltips, but since all the tooltips are only children of the <body>
element, there is no way I can select them. Hence it would be nice if the aubs-tooltip
had a bindable class
property allowing the user to add custom classes.
I encountered this issue when using the multiple poop-overs in a tab.
When navigating away from the page with tabs the line document.body.removeChild(this.popover); causes an error that reads:
Unhandled rejection Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
A simple check for if this element exists before running removeChild removes the error.
Thanks for a great pluging!
What do I need to put in aurelia.json to use this with aurelia cli?
Hector thanks for aurelia-bootstrap. Really a great plugin! I am noticing some javascript warnings, and I am unsure how to suppress them. Can you suggest anything? I am attaching screenshot because the trace is kind of lengthy. This occurs at the time my aubs-tabset
and aubs-tab
s are loaded.
For some reason, the first warning (property-observation) is suppressed when I build with au build --env prod
but the other two are not.
Hi this looks really cool.
I just want to let you know that currently the project page
link in the README points to http://tochoromero.github.com/aurelia-table, which looks awesome too, but it is not for this project.
Is there a way to set a default value on the model and have it automatically chosen when the control is instantiated?
I.e. Set the default value to United States, but also allow it to be updated and have the typeahead work normally
I would appreciate automatic support for Aurelia/Webpack.
Right now, one needs to add the following rather long list of child modules to the webpack config:
plugins: [
new ModuleDependenciesPlugin({
"aurelia-bootstrap": [
'./buttons/aubs-btn-checkbox',
'./buttons/aubs-btn-loading',
'./buttons/aubs-btn-radio',
'./collapse/aubs-collapse',
'./dropdown/aubs-dropdown',
'./dropdown/aubs-dropdown-toggle',
'./popover/aubs-popover',
'./tooltip/aubs-tooltip']
}),
Never mind. Please delete comment.
the pagination element is not styled when the plugin is configured to use bootstrap 4
page-item
classpage-link
classIf you have a tooltip on a button set to display on mouseover, if the button gets disabled when the tooltip is displayed, the tooltip does not go away.
The only way to get it to go away is to have the button enabled again and hover out.
My view:
<button type="button" class="btn btn-default" aubs-popover="custom-popover.bind: stationsorterPopover; position.bind: 'bottom'; trigger.bind: 'outsideClick';">
Buttontext
</button>
<div ref="stationsorterPopover">
<div class="popover-content">
PopoverContent (dynamic)
</div>
</div>
When navigating away (using Aurelia router) I get message:
Unhandled rejection Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at AubsPopoverCustomAttribute.detached (http://localhost:9000/scripts/vendor-bundle.js:76234:31)
at Controller.detached (http://localhost:9000/scripts/vendor-bundle.js:22370:26)
at View.detached (http://localhost:9000/scripts/vendor-bundle.js:20452:26)
at removeAction (http://localhost:9000/scripts/vendor-bundle.js:20745:25)
at ViewSlot.removeAll (http://localhost:9000/scripts/vendor-bundle.js:20764:14)
at after (http://localhost:9000/scripts/vendor-bundle.js:27598:39)
at work (http://localhost:9000/scripts/vendor-bundle.js:27698:9)
at http://localhost:9000/scripts/vendor-bundle.js:27712:20
at tryCatcher (http://localhost:9000/scripts/vendor-bundle.js:3373:23)
at Promise._settlePromiseFromHandler (http://localhost:9000/scripts/vendor-bundle.js:2590:31)
at Promise._settlePromise (http://localhost:9000/scripts/vendor-bundle.js:2647:18)
at Promise._settlePromiseCtx (http://localhost:9000/scripts/vendor-bundle.js:2684:10)
at Async._drainQueue (http://localhost:9000/scripts/vendor-bundle.js:168:12)
at Async._drainQueues (http://localhost:9000/scripts/vendor-bundle.js:173:10)
at Async.drainQueues (http://localhost:9000/scripts/vendor-bundle.js:47:14)
Hello and thanks for the great plugin, I based myself on your great work to do Custom Element as well. I noticed some typo in your docs and github readme.
First, it seems that Github changed their markdown processor and typing #Header 1
is no longer and should be written with a space after the #
so it should be # Header 1
. I had to update all of my Github project as well :(
Second, I think that your doc is incorrect in Global Defaults. The :
should be replaced by =
and the end of each line should be closed accordingly.
For example this:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-bootstrap', config => {
config.options.accordionCloseOthers: true,
config.options.accordionGroupPanelClass: 'panel-default',
...
});
should be
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-bootstrap', config => {
config.options.accordionCloseOthers = true;
config.options.accordionGroupPanelClass = 'panel-default';
...
});
Again, thanks for the great work. I'm also starting a set of 3rd party Bootstrap plugins as Custom Element, you might want to take a look Aurelia-Bootstrap-Plugins. Thanks for helping the community :)
I noticed that on Chrome and Firefox, I can select results with ENTER/RETURN keypress, but on Safari and IE11, the keypress method of selection doesnt work forcing a mouse click to make a selection.
I'm not able to find a way to inject variables into a custom popover. It seems like I should be able to use variables inside of the custom popover template, but that did not work. It does not seem to have access to the view model.
I've noticed that when an element that used the aubs-popover custom attribute got detached, and then re-attached, there's a crash that prevents the element from being re-attached properly.
Here's a simple reproducible case :
// itemWithPopover.js
window.someCondition = true;
export class ItemWithPopover {
get someCondition() { return window.someCondition; }
}
<template>
<!-- itemWithPopover.html -->
<div if.bind="someCondition" aubs-popover="custom-
popover.bind:popover;trigger:click;position:bottom;">
Click me
</div>
<div ref="popover">
<h3 class="popover-title">Hello world</h3>
</div>
</template>
Use the console to change the value of someCondition from true to false, then back to true to reproduce the issue.
As I can see, there are a few important PR's which are not accepted, last release was more than year ago, BS4 branch is not being developed anymore, etc. So, Is this project abandoned?
One additional observation, possibly a bug, so far seen with chrome and safari (that is all I have tested for this today).
When selecting an item with a mouse click (i.e. not selecting with keyboard arrow keys + ENTER), the value passed to the change delegate is actually null the first time, and not until the second (or sometimes even third attempt) the value is set to the correct selected value. It seems almost as if there is a disconnect between the change event and the value model, and it takes a couple of attempts to get the component 'primed'.
Thanks much for looking into this! I hope to dig into the source more as well, will post here or make a pull request if I come up with any improvements.
Would it be possible for the pagination bar to resize based on the container it is in. So, when viewing on a 'small' screen, the pagination bar would show the number of pages that can fit in the width - e.g 10 pages, whereas on a 'large' screen, the pagination bar would show more, since there is more width, e.g. 20 pages.
"show" or "open" class are added to div with class dropdown instead of div 'dropdown-menu' - making it dosent show dropdown on bootstrap 4.0.0-beta
Now that bootstrap v4 beta is finally out, it would be great if this could align with it :)
The following piece of html template( in aubs-pagination.html) seems to cause an error in IE 11:
<li class-name.bind="currentPage === page.value ? 'active' : ''" repeat.for="page of displayPages">
<a click.delegate="selectPage(page.value)">${page.title}</a>
</li>
</li>
The error is caused by this specific attr binding expression: page of displayPages
The error:
{
[functions]: ,
__proto__: { },
__�symbol:hasInstance0.056852180051203466: undefined,
__�symbol:isConcatSpreadable0.056852180051203467: undefined,
__�symbol:iterator0.056852180051203461: undefined,
__�symbol:match0.056852180051203462: undefined,
__�symbol:replace0.056852180051203463: undefined,
__�symbol:search0.056852180051203464: undefined,
__�symbol:species0.056852180051203469: undefined,
__�symbol:split0.056852180051203465: undefined,
__�symbol:toPrimitive0.0568521800512034610: undefined,
__�symbol:toStringTag0.0568521800512034611: undefined,
__�symbol:unscopables0.056852180051203468: undefined,
description: "Unable to get property 'attrToRemove' of undefined or null reference",
message: "Unable to get property 'attrToRemove' of undefined or null reference",
name: "TypeError",
number: -2146823281,
stack: "TypeError: Unable to get property 'attrToRemove' of undefined or null reference
at _compileElement (http://localhost:9000/scripts/vendor-bundle.js:21695:13)
at _compileNode (http://localhost:9000/scripts/vendor-bundle.js:21410:11)
at _compileElement (http://localhost:9000/scripts/vendor-bundle.js:21710:11)
at _compileNode (http://localhost:9000/scripts/vendor-bundle.js:21410:11)
at _compileElement (http://localhost:9000/scripts/vendor-bundle.js:21710:11)
at _compileNode (http://localhost:9000/scripts/vendor-bundle.js:21410:11)
at _compileNode (http://localhost:9000/scripts/vendor-bundle.js:21432:13)
at compile (http://localhost:9000/scripts/vendor-bundle.js:21379:7)
at _compileElement (http://localhost:9000/scripts/vendor-bundle.js:21581:9)
at _compileNode (http://localhost:9000/scripts/vendor-bundle.js:21410:11)"
}
Write the documentation explaining how to use the Typeahead custom templates
As of now the the tooltip attribute supports only top, left, right, bottom positions.
It would be very nice if it can support all the possible positions as shown in the following link.
<label for="statusInput">Status</label>
<aubs-typeahead
id="statusInput" ...`
When the label element receives focus (e.g. by being clicked on), it does NOT pass the focus on to its associated typeahead control.
I need to set the initial value of typeahead when I plan to use with a database. The following constuctor will display the Selected Month but I need the value displayed in the aubs-typeahead tag
constructor(api, ea) {
this.api = api;
this.contacts = [];
this.selectedId = null;
this.monthOfTheYear = {
name: 'December',
short: 'Dec',
number: 12
}
Thanks
John
For the most part this works fine and isn't noticeable. The problem arises when you are trying to keep the state of the page when a user is going forward and back through the browser history.
On my own page I was keeping that stored in a variable, every time the variable changed I would have an ajax call that would run and populate the items on the page. I did have to have a pageLoaded variable so that I didn't have an endless loop though. When a user comes to the page I'd set the page number for the pagination and then set the pageLoaded to true so my pageNumberChanged event would fire after the fact.
The problem came from the fact that after I set this to true, the following would run
AubsPaginationCustomElement.prototype.pageSizeChanged = function pageSizeChanged() {
this.currentPage = 1;
this.calculatePages();
};
Which would then fire my pageNumberChanged event effectively erasing the prior value. I'm not sure why this is set here, I would think I would set that on my own when either the pageSize or totalItems are changed. Same goes for external stuff like the user filtering, sorting, etc. I've commented this out in my code but I don't think that this should be in the source either. Just allow the user to set it in their own code.
Would like to take the value typed in aubs-typeahead and not found in the list so I can add it to the list. I tried to use ref but cant get the value
John
When you select a value from the list of filtered options (keyboard or mouse click) the change.delegate
is invoked and calls the method defined within the view model, but the bound value is undefined
the first time. Subsequent selections from the filtered list of options will successfully pass the selected value as an argument to the defined method every other time.
Steps to reproduce:
undefined
. The second time a selection is made the selected value will be logged in the console.Alpha 6 of Bootstrap changes the open class on dropdown to show, along with some other components:
https://github.com/twbs/bootstrap/releases
The dropdown is currently broken for Bootstrap 4.
@tochoromero the aubs-typeahead
element is working great. I am using it for it's side effects, basically to add selections to another model, which a multi select menu.
One thing I could not figure out yet, is how to remove the typed in value upon blur, or in the change.delegate. It seems like the selected value is exposed in the custom element but whatever string is currently typed in cannot be cleared unless the user manually deletes the text.
Let me start off by saying great job on the library. I have a problem though, and I just want to make sure it's not just something I'm missing before I fix the code and submit a PR for nothing.
TypeAhead Component:
When the browser's Autofill is enabled, it comes up with it's own popup with suggestions for filling the field. It should be really simple to turn off by adding autocomplete="off"
to the <input>
field, but I can't find a way to add it.
Am I missing something?
Hi,
I have read your details on setting up the CLI with Aurelia-bootstrap and I am wondering if things have changed in recent times regarding the basic setup. I wonder if you might review the documentation as I was having trouble setting up the package.json and getting the CLI to work with Aurelia-bootstrap.
Custom entry keeps reseting when leaving focus from input.
This occurs even if custom-entry is allowed.
Works properly with data.bind but not with data.call
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.