ember-bootstrap / ember-bootstrap Goto Github PK
View Code? Open in Web Editor NEWEmber-cli addon for using Bootstrap as native Ember components.
Home Page: https://www.ember-bootstrap.com
License: Other
Ember-cli addon for using Bootstrap as native Ember components.
Home Page: https://www.ember-bootstrap.com
License: Other
It throws error "property 'ember-bootstrap' is not found"
See here the generic problem and solution
ember-cli/ember-cli#3718
It would be nice to have it fixed :)
{{#bs-button id="detect-user" type="primary" classNames="primary-button" action="detect-user"}}
Detect user
{{/bs-button}}
The action is never fired... all I did was install the addon, restart ember server, and add this line of code. The button shows up with the correct bootstrap styling and everything, but the action NEVER gets fired on click. Am I doing something wrong or is this a known issue?
Not sure how you can do that, but whenever I want to find this addon from google it takes me some effort.. searching for "ember bootstrap" doesn't show up at all (not even in the 5th page).
Brocfile is still in the docs. See:
https://github.com/ember-cli/ember-cli/blob/master/TRANSITION.md#brocfile-transition
I have time in 2 weeks to create a PR. Perhaps anyone can beat me to it.
Hi, what's the possibility of adding tooltips support, I can contribute a PR for it but I'm wondering what's the best approach to mach the vision you have for the addon.
I was thinking of doing something similar to what was done on the old bootstrap-for-ember code where you have an component which will render all tooltips, then a component for each tooltip and a helper which will bind an element to have tooltips enabled; the positioning for each tooltip will be calculated from the element with the binding. I'll skip the controller and outlets hackery they had if possible.
Do you think this is a viable approach?
I currently have an asp.net mvc application that has its own copy of bootstrap that I need available to it. I use simple imports in the ember-cli-build so that I have access to it. I'm assuming your add-on brings in its own bootstrap version as well... maybe not?
do you have any recommendations on handling this? I can't see having my users download both bootstrap copies. Really want to use this add-on.
Thanks
Trying out the basic demo in an Ember-cli 2.2.0-beta.1 project:
{{#bs-modal title="Simple Dialog"}}
Hello world!
{{/bs-modal}}
I'm getting this error:
Uncaught Error: ember-wormhole failed to render into '#ember-bootstrap-modal-container' because the element is not in the DOM
Is Ember-cli v2+ supported by ember-bootstrap / ember-wormhole? If so, any idea why I might get this error? The few other controls I tried seem to work ok.
is there a property to toggle the accordion panel? forgive me, this is all new; using the example I can get them all to expand and close on switch, but i can't collapse any individual item once expanded -- i can only collapse by expanding another...
I'm writing an acceptance test for an application using bs-modal. The problem is that the andThen() test helper does not wait for the closedAction() to be executed when fade=true (as is the default).
Probably this is because Bootstrap's emulateTransitionEnd calls setTimeout() and the andThen() helper is unable to cope with this (not being a promise).
What are my options? Adding a delay (either with setTimeout or with Ember.run.later) in the test seems to do the trick. But I'm wondering if there is a better way. Are there any examples or documentation concerning tests and ember-bootstrap?
Below a full example. A modal dialog is opened. Once the dialog is closed the background-color of the body is set to red. The acceptance test will fail (because it tests for background-color before the color is changed). When settings fade=false the test succeeds:
app/templates/application.hbs
app/components/my-popup.js
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
closed() {
console.log('Modal completely closed.');
Ember.$('body').css('background-color', 'red');
}
}
});
app/components/my-popup.hbs
tests/acceptance/test-my-popup-test.js
import { test } from 'qunit';
import Ember from 'ember';
import moduleForAcceptance from 'ember-bs/tests/helpers/module-for-acceptance';
moduleForAcceptance('Acceptance | test popup');
test('popup changes background', function(assert) {
visit('/');
click('.modal-dialog button[type="button"]');
andThen(function() {
var bodyColor = Ember.$('body').css('background-color');
assert.strictEqual(bodyColor, 'rgb(255, 0, 0)');
});
});
using the
http://kaliber5.github.io/ember-bootstrap/api/classes/Components.Dropdown.html
No matter which example I try I have to click the button twice... dropdown activates on 2nd click. Any tips for this?
First of all congrats for this awesome addon.
I have a bs-form with an action attribute pointing to my action in the route. One thing I haven't found how to do it is to send back (data up) the form object to the action. Using model=formObject doesn't work either. Do you know how I could achieve that? I think it's rather crucial since most actions in Ember 2.0 take place in the route and not in the controller. I can explicitly ask the controller from the route to get the formObject but I would prefer return it from the component's action directly.
Hello,
I'm new to Ember, so please forgive what is probably a silly question. I'm using a bs-alert on a login form to display an eventual error message, in case user fails to login.
If user dismisses the alert by clicking its "close" button, and then fails again to login, the alert does not show anymore. I think I should somehow reset the control when he tries to login, but cannot understand how to do this: could you please help?
Thanks,
al.
dismissed must probably be true when initially hidden
Hi, this plugin seems to break ember fastboot due to transitions.js referencing a global jQuery variable (which is available as window.jQuery in ember fastboot). Ember CLI version 2.4.3
Can you explain the rationale behind this?
It seems that when the transition is complete, we are triggering a focus event on the modal root element. I have some code that gives focus to an input field in my modal from the openedAction, but when fade animation is enabled, this line of code de-focuses it as soon as the animation is complete.
What was the intent of this line, and is there a way that I can auto-focus fields in my modal?
Introduced by #6, all form elements in a horizontal form have wrong classes, literal "horizontalInputGridClass" instead of reference to property.
I have the following in my confg/environment.js
'ember-bootstrap': {
formValidationSuccessIcon: 'icon icon-check',
formValidationErrorIcon: 'icon icon-error',
formValidationWarningIcon: 'icon icon-warning',
formValidationInfoIcon: 'icon icon-info'
}
I can see that Config.load is getting called from the initializer but it doesnt look like its getting set in the form group, errorIcon is looking up Config.formValidationErrorIcon
which is its default value.
Starting a new project and have not used ember-bootstrap before. I am using ember-cli 2.5.0.
I followed the instructions for installation and had no errors, but I am not getting bootstrap classes, nor the components. I do see ember-bootstrap in my bower_components folder.
Any help for the newbie is appreciated!
The drop down button stays seperated in the button group:
<div class="input-group">
<div class="input-group-btn">
{{#bs-dropdown}}
{{#bs-dropdown-button}}Dropdown <span class="caret"></span>{{/bs-dropdown-button}}
{{#bs-dropdown-menu}}
<li>Something</li>
<li>Something different</li>
{{/bs-dropdown-menu}}
{{/bs-dropdown}}
</div>
{{bs-input value=foo placeholder="foo"}}
</div>
There is one <div>
to much in the result:
<div class="ember-view dropdown">
I have an issue where I have to double click on a bs-dropdown-button
in order for the dropdown menu to appear. Doing some Googling and finding some info about an Angular/Bootstrap project that had the same problem, I removed the data-toggle="dropdown"
in Chrome inspector and now it only takes one click. Does this need to be removed from the library or is it more likely that I have my app set up in a weird way?
Thanks!
In the docs for select box items I can see the following:
{{bs-form-element controlType="select" choices=countries choiceLabelProperty="name" choiceValueProperty="id" label="Country" value=selectedCountry}}
The above works fine when using controlType="select"
but when you change to controlType="select2"
there are no options to select from?
I noticed select2 is a valid option in:
The type of the control widget. Supported types:
'text'
'checkbox'
'select'
'select2' (needs ember-select-2)
'textarea'
any other type will use an input tag with the controlType value as the type attribute (for e.g. HTML5 input types like 'email'), and the same layout as the 'text' type
and I have run ember install ember-select-2
so I'm just wondering if there is a different way to load the choices in if using select2?
Hi, I've tried to make a dynamic menu , however with no success. In the code below, the each-in inside the bs-dropdown-menu does not change when I change the variable.
{{#each-in filters as |dimension keywords|}}
{{#bs-dropdown tagName="li"}}
{{#bs-dropdown-toggle}}{{dimension}} <span class="caret"></span>{{/bs-dropdown-toggle}}
{{#bs-dropdown-menu}}
{{#each-in keywords as |keyword val|}}
<li><a href="#">{{keyword}}</a></li>
{{/each-in}}
{{/bs-dropdown-menu}}
{{/bs-dropdown}}
{{/each-in}}
The variable is:
filters: {
contaNivel2: { 'MANUTENCAO': true , "ONE MORE FILTER": true}
contaNivel1: {"OTHER FILTER": true}
},
Forms support https://github.com/dockyard/ember-validations already, add support for https://github.com/offirgolan/ember-cp-validations
I've noticed that there are pretty much zero ember addons that provide an easy way to implement tabs, so I'm assuming it's a hard thing to replicate, but it would be awesome to get access to tabs available in this package which has so many other things from Bootstrap that I'm used to! ๐
Hello I am completly new to ember.js
I followed the installation guide. However the css is not applied. Do I need to do an import in my scss files ?
for now I just have
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp({
'ember-bootstrap': {
'importBootstrapTheme': true,
'importBootstrapCSS': true,
'importBootstrapFont': true
}
});
Can you please add a navbar example with the collapse component to the documentation?
Thanks,
Joep
The homepage of the docs says that the Bootstrap CSS is included, but when I use
To be called when the alert has been dismissed.
I have a child component (rendered in the modal body) that needs to be able to close the modal in which it is wrapped. Of course, the component shouldn't need to know if it's wrapped in the modal. In the child component, was thinking I could send the modal's close action, to close the modal. But that's not working.
{{#bs-modal footer=false}}
{{some-component}}
{{/bs-modal}}
Where some-component has this:
actions: {
cancel() {
this.sendAction('close');
}
}
Not working. Nor can I pass the close action into the child:
{{some-component close="close"}}
Suggestions? Help? Thanks!
It looks to me like the dropdown menus do not work.
Have I missed something or is this an issue?
Are you planning to add bootstrap modal or you are going to merge 'modal-native' branch with master ?
http://kaliber5.github.io/ember-bootstrap/api/classes/Components.Button.html
No example code for Basic Usage and some other.
bs-select can not be disabled
{{bs-select prompt="Select one..." content=model.showTypeOptions disabled=true}}
Does not render a disabled attribute.
After adding this to your node_modules/ember-bootstrap/addon/components/bs-select.js it does disable.
attributeBindings: ['disabled']
I have the feeling I am missing something? Is this intentionally because Ember.Select does not support that? http://stackoverflow.com/questions/11457206/emberjs-how-to-disable-ember-select Workaround?
When will this project support BS4?
Is there a way to subscribe to events that happen within a component? For example, If I have an alert or modal open and the containing controller needs to know when that component has been closed, is that possible given the current api? If not, why not just go ahead and allow the current actions to continue bubbling up?
The bs-modal component doesn't seem to work on Safari for iPhone. The modal dialog does not appear on the screen.
ENOENT: no such file or directory, stat '/Users/me/Projects/bs/tmp/concat_with_maps-input_base_path-4RsHvtY9.tmp/0/bower_components/bootstrap/js/transition.js'
Error: ENOENT: no such file or directory, stat '/Users/me/Projects/bs/tmp/concat_with_maps-input_base_path-4RsHvtY9.tmp/0/bower_components/bootstrap/js/transition.js'
at Error (native)
at Object.fs.statSync (fs.js:892:18)
at ConcatWithMaps.keyForFile (/Users/me/Projects/bs/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/broccoli-caching-writer/index.js:90:20)
at Array.map (native)
at ConcatWithMaps.CachingWriter._conditionalBuild (/Users/me/Projects/bs/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/broccoli-caching-writer/index.js:112:65)
at /Users/me/Projects/bs/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/read_compat.js:61:34
at lib$rsvp$$internal$$tryCatch (/Users/me/Projects/bs/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:493:16)
at lib$rsvp$$internal$$invokeCallback (/Users/me/Projects/bs/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:505:17)
at lib$rsvp$$internal$$publish (/Users/me/Projects/bs/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:476:11)
at lib$rsvp$asap$$flush (/Users/me/Projects/bs/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
right after npm install && bower install && ember server
I think it would be great to be able to declare animation speed of modal fade in/out.
More directly, I want to be able to pass in the properties to {{bs-modal}}:
Modal.TRANSITION_DURATION = 300; Modal.BACKDROP_TRANSITION_DURATION = 150;
modal-closer
's targetObject
property is parentView.parentView.parentView
which places a pretty hard constraint on the layout of the modal -- no other views/components can be added to the layout in between the modal header/footer and the bs-modal
component or the close action will get sent to the wrong ancestor component.
Adding additional wrapping components to the layout? Why would somebody ever want to do such a thing? I'm glad you asked! :)
For reasons not really relevant to this issue, I am using a custom form component that performs validations using parsley.js, rather than bs-form
. Also, I prefer to align my generated HTML with what the browser expects whenever possible, as it makes various "off the beaten path" uses cases such as old-school mobile browsers, screen readers and accessibility more likely to function correctly. So, I want to lay out my modal something like this (leaving out a bunch of the details):
This way the form wraps both the body and the footer and I don't have to put a hidden <input type="submit"/>
or do custom key handling to support submit-form-on-enter.
That is my use case, but speaking more broadly, the restriction that you cannot wrap the modal header or footer in a component seems less than ideal.
I have two proposals for how to address this, one that puts a teeny burden on the developer but is more Ember-onic, and one that is more similar to the current implementation in that it "just works".
My preference is option 1, but I'd be happy to put together a PR for either one.
The targetObject
property on the modal-closer
is override-able, so if the template had access to the bs-modal
component, it could just pass it in, overriding the default. This would involve changing the bs-modal
's {{yield}}
to {{yield this}}
, and then any developer that wants to insert an extra component would just need to add as |modal|
to the {{#bs-modal}}
and targetObject=modal
to the {{bs-modal-footer}}
:
This is a bit of a hack, but I believe would work. We could just make the targetObject
property on the modal-closer
a bit more intelligent. If we add an isBsModal: true
property to bs-modal
, then we could redefine modal-closer
's targetObject
to search up the tree like this:
targetObject: Ember.computed('parentView.parentView.parentView.parentView.parentView.parentView', function() {
let view = this.get('parentView');
while (view && !view.get('isBsModal')) {
view = view.get('parentView');
}
return view;
});
All the .parentView
s in the computed property dependency are for invalidation in case things are re-rendered such that the modal-closer
component persists, but the ancestor hierarchy changes. This would allow three additional wrapping components in between the modal-closer
and the bs-modal
-- obviously we could make it support more by adding more .parentView
s. It might also work to do it like this:
targetObject: null,
didInsertElement() {
this._super(...arguments);
let view = this.get('parentView');
while (view && !view.get('isBsModal')) {
view = view.get('parentView');
}
this.set('targetObject', view);
}
but I'd have to do a bit of research to make sure willClearRender
/didInsertElement
would reliably be called anytime the ancestor hierarchy changes.
So, yeah, this option is kind of hacky which is why I prefer option 1.
... when clicking the close button
A component for the progress bar would be nice :-)
In situations where you prefer to use another strategy for importing Bootstrap CSS... I
I don't see any documentation on getting the collapsable navbar to work. Clicking the hamburger icon doesn't seem to open up the collapsed menu. Is there a component needed to get that to work?
should this be added into the bs-form-element component? potential memory leak without it? I will submit PR if wanted
https://github.com/kaliber5/ember-bootstrap/blob/master/addon/components/bs-form-element.js
willDestroyElement: function() {
if (!Ember.isBlank(this.get('property'))) {
Ember.Binding.from("model." + this.get('property')).to('value').disconnect(this);
Ember.Binding.from("model.errors." + this.get('property')).to('errors').disconnect(this);
}
}
I have deprecaton warning "Ember.required is deprecated as its behavior is inconsistent and unreliable."
For example, in the line: https://github.com/kaliber5/ember-bootstrap/blob/master/addon/mixins/type-class.js#L18
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.