tochoromero / aurelia-bootstrap Goto Github PK

View Code? Open in Web Editor NEW

33.0 4.0 23.0 1.84 MB

Bootstrap Components for Aurelia

Home Page: https://tochoromero.github.io/aurelia-bootstrap/

License: MIT License

JavaScript 91.55% HTML 8.45%

aurelia-bootstrap's Introduction

This project is no longer in development

Hello guys. As it has been painfully obvious this project has not been updated in a long time.

Since I started the repo I changed Jobs, moved to another country and had my third child, I just don't have the time to actively work on it. A huge reason is because on my previous Job we were using Aurelia so I could justify spending time on the repo on work hours, but that is no longer the case. It is a shame because I enyojed working on it, I learned a LOT and it was amazing to see people actually using it.

Fortunately, there is another similar project which seems to be actively developed, please check it out https://github.com/aurelia-toolbelt/aurelia-toolbelt

So Long, and Thanks for All the Fish.

Bootstrap Component for Aurelia

Aurelia Bootstrap is a series of Custom Element and Custom Attributes that provide Bootstrap components native to Aurelia. Please check our documentation for installation details and the reference manual:

https://tochoromero.github.io/aurelia-bootstrap/

Avilable Components:

Accordion
Buttons
Collapse
Dropdown
Pagination
Popover
Tabs
Tooltip
Typeahead

Release Notes

0.1.20

Custom HTML templates for typeahead.

0.1.19

Assign id to typeahead's input. This will allow you to use a label for attribute with a typeahead.

0.1.18

Fix dropdown close 'always' for Bootstrap 4

0.1.17

Use 'show' classes according to Bootstrap 4 Alpha 6.
Add styles for pagination with Bootstrap 4.
Provide a way to add custom css classes to tooltips.

0.1.16

Check if we have an actual popover object when detaching the Popover before setting the display to none.

0.1.15

Handle Custom Popovers better when the same popover is used in multiple elements.

0.1.14

Typeahead tweaks and the documentation for it is now live.

0.1.13

New Typehead component. Allow you to have an input with a list of filterable suggestions.

0.1.12

All the component default values are globally configurable. Please check the documentation for more details.

aurelia-bootstrap's People

Contributors

Stargazers

Watchers

aurelia-bootstrap's Issues

Custom CSS class for Tooltip

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.

Responsive sizing for pagination bar based on container

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.

Pagination: TotalItemsChange and PageSizeChanged setting currentPage to 1

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.

Bootstrap 4 dropdown broken

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.

possible platform difference with aubs-typeahead

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.

How to use with aurelia cli

What do I need to put in aurelia.json to use this with aurelia cli?

Tooltip stays if the button gets disabled

If 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.

Label "for" not working (not passing focus) to aubs-typeahead

<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.

pagination unstyled with bootstrap 4

the pagination element is not styled when the plugin is configured to use bootstrap 4

li elements need to have page-item class
a elements need to have page-link class

Popover causes error when navigating away from view

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)

Link to project page points to https://tochoromero.github.io/aurelia-table/

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.

Add Webpack support

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']
    }),

Issue with expression on Ie 11

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 ? &apos;active&apos; : &apos;&apos;" 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)"
}

typeahead adds showClass to wrong element

"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

Typeahead: async data and custom-entry

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

Support more tooltip positions

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.

Tooltip positions

How to inject variables into custom popovers?

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.

Typeahead fails to populate value when initially selected

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:

Initialized the widget on the page
Place a console.log instruction in your callback method within the view model to log out the passed argument value.
Begin typing in the field and select one of the filtered values in the displayed list (either mouse-click or keyboard selection)
Observe the console in the browser. The first selection will show undefined. The second time a selection is made the selected value will be logged in the console.
Now repeat steps 3 & 4 and you'll notice that every other time you select a value the value is output in the console.

Failure to reattach popvers (this.viewModel.attached is not a function)

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.

Write Documentation for Typehead custom template

Write the documentation explaining how to use the Typeahead custom templates

Installation Problem...

Never mind. Please delete comment.

how to suppress javascript warnings?

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-tabs 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.

Browser autofill is popping up in front of dropdown

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?

Incorrect way of calling global options in the docs

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 :)

aubs-typeahead: selecting items with mouse click

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.

some feedback about aubs-typeahead

@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.

Popover: Element missing when running removeChild in detached

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!

Support bootstrap v4 beta changes

Now that bootstrap v4 beta is finally out, it would be great if this could align with it :)

Preset Default Value

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 know this project is not maintained anymore, but is the documentation still available?

Getting Aurelia CLI going with Aurelia-bootstrap as of 2018

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.

Add Item

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

Typeahead initial value

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

Is this project abandoned?

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?