It has some bugs when clicking on the 15th page in current sample it hides the last page

Great work on the toolbelt so far! 👍

I just went to visit the demo page and noticed that there is an error on page initialization preventing the page from loading:

Uncaught Package not found fuse-box-aurelia-loader

Maybe worth taking a look if you're not aware of it already 😄 .

Keep up the great work.

Cheers,
Sean

The bootstrap toggle does not change the status when clicking on the label.

Hi,
How do I bundle aurelia-toolbelt with au-cli using au build --env prod?
I followed the same pattern as aurlia-dialog modifying aurelia.json file in aurelia_project but get error when I try to use it

{
"name": "aurelia-toolbelt.js",
"dependencies": [
{
"name": "aurelia-toolbelt",
"main": "index",
"path": "../node_modules/aurelia-toolbelt/dist/commonjs",
"resources": []
},
"jquery"
]
},
Thanks,
John

instructions typo

Hello I just started using your lib and just wanted to mention that all the page instructions have the wrong code to import the plugin. For example Modals says to register the plugin through

aurelia.plugin(PLATFORM.moduleName('aurelia-toolbelt'));

while it should

aurelia.use.plugin(PLATFORM.moduleName('aurelia-toolbelt'));

Also in the README it says

aurelia.use(PLATFORM.moduleName('aurelia-toolbelt'));

which is again wrong but with different typo.

different subject

Out of subject, is that normal that the following doesn't work

aurelia.use.plugin(PLATFORM.moduleName('aurelia-toolbelt/components/bootstrap/modal'));

I only get it to work with the entire bootstrap component

aurelia.use.plugin(PLATFORM.moduleName('aurelia-toolbelt/components/bootstrap'));

Aurelia-Toolbelt, What is next?

We are making a lot of changes that you can see below list.

Project overhaul

• Mono repo by Lerna

  We have it as experimental branch but it is not complete.

  These changes are postponed until the release of the Aurelia vNext.

• Align the names of components, attributes and etc for the whole package.

• Release Aurelia-Toolbelt in production mode.

• Use Aurelia logger.

• Update site theme to something like official Bootstrap 4 or PrettyDocs

• Support Aurelia CLI better.

• Add bootstrap-reboot.css to the package.

• Add specific font/SVG collection for components very small and limited then remove Font-Awesome fonts.
  We can use icomoon and svg-icon for this purpose.

Components

This section points to component changes.

Bootstrap 4

• Update Bootstrap libraries to latest version.

• Update Alert component with count-down timer like Alert.

• Add Responsive Embeds components like Responsive Embeds

• Add Form components along with its subcategories like Form

• Add Images components like Image

• Add Layout and Grid System components like Layout and Grid System

• Add Media components like Media

• Add Tables components like Tables

• Add Wave effect to components. It should be optional.

  We can support this feature with this sample based on Waves

• Add Horizontal/Vertical Toolbar like Toolbar.Js

Current

• Add open on hover to Navbar and Mega menu.

  We may need to change the Mega menu structure like this.

• Replace Float Labels with new one.

  The current component has a problem with RTL so we should change it to Float Label CSS.

  For supporting better inputs and input groups this should be a custom attribute. Sample

• Update Tokenize with latest version and new npm repository.

• Complete implementation of masked-input and documentation.

• Replaced nprogress with nanobar

• Complete implementation of Fuse.js and documentation like Angular fuse.js and ng2-fuse

• Replace Divider with Divided.

  It should support horizontal and vertical alignment.

• Replace BlockUI with jQuery LoadingOverlay

  Another alternative is FreezeUI

  We need HTTP interceptor like ng-http-loader

• Update Toggle with an icon for disable mode based on forbidden cursor.

  You can find the sample here

New

• Add Quote Block

• Add animated input border bottom

• Add expandable panel

• Add Full screen panel

• Add price table

  Another alternative is Pricing Table

• Add Tri-state Checkbox

  Another candidate is bootstrap-checkbox-x

• Add multilevel navbar

• Add keypad like jQuery Keypad

  It should be integrated with the Password component.

• Add iPhone-style password fields

  Another alternative is dPassword but should convert to vanilla js.

  It should be integrated with the Password component.

• Add Spin kit as a component like ng-spin-kit

• Add QRCode.js

  this component is useful for supporting two-factor authentication in your application.

• Add navbar toggle animations

• Add tui.editor

• Add jQuery PopupWindow

  Its theme should be coordinated with Bootstrap 4.

• Add Bootstrap Select

• Add Split.js

• Add MetisMenu.js

• Add push.js

• Add autosize

• Add bootstrap-fileinput

• Add bootstrap-tabs-x

  Supports various tab opening directions: above (default), below, right, and left.

• Add noUiSlider

• Add Date picker

  We need a component with date range so check this too.

  We need better UI maybe something like this

  Support Jalali date picker is so important.

  Support time picker.

• Add SidebarJS

• Add Toastr

  Support more position like Angular Toastr

  Support features of Snackbar

  Another alternative is noty

• Add Cropper.js

• Add Image Zoom

  Another alternative is drift

• Add Barcode Writer

• Add jQuery Easy Ticker

  Another alternative is Bootstrap News Box but should change to Bootstrap 4
  We can write it based on Bootstrap 4

• Add jQuery Collapser

  We can write it based on Bootstrap 4

  Another candidate is Simple JS Text Expand/Collapse

• Add jQuery News Ticker

  Another alternative is TickerMePink

  Another alternative is Simple jQuery News Ticker

  It should support RTL.

• Add jQuery contextMenu

  Another candidate is contextMenu.js

• Add jScroll

  Another alternative is infinite-scroll

  It is useful for infinite scrolling.

  Other candidates are Infinite Scroll and Infinite Scroll with Cross-Browser

• Add Zenscroll

  This library has some problems that need to be resolved.

• Add TimeZ

• Add CodeMirror

  Another candidate is highlight.js

• Add TouchSpin

• Add Tree View

  Another candidate is jsTree but not support Bootstrap 4 theme.

  Another candidate is jqTree but not support Bootstrap 4 theme.

• Add Dual Listbox

• Add milestones

• Add SmartWizard

  It should support vertical mode too.

• Add jqPropertyGrid

  It should support Bootstrap 4 theme.

  However, I prefer to write it again with Typescript.

• Add DomOutline

• Add Mousetrap

• Add Slinky

  Check Bootstrap 4 theme

• Add appear.js and appearlazy

  Another candidate is lozad.js

• Add Swipebox

• Add Sticky.js

  Another candidate is Sticky-Kit

• Add maxlength

  works with Bootstrap 4 without any changes, use badge instead of label

• Add bootstrap scrolling tabs

• Add List Filter

  We can upgrade list-group component with this feature. However it is not necessary we can make list-group binable to any datasource.

• Add Colorpicker

• Add Bootstrap Tour

• Add Muuri

• Add fullcalendar with Persian support.

  Another candidate is tui.calendar

• Add Virtual Keyboard

  It should support Bootstrap 4 theme.

  However, I prefer to write it again with Typescript.

• Add Social Buttons

• Add Froala Editor

  Another candidate is Trumbowyg

  Another candidate is Summernote

• Add SimpleMDE

  Another alternative is krajee markdown editor

• Add JSONFormatter

• Add xml-formatter

• Add jquery-treetable

  Another candidate is jquery-treegrid

• Add Readmore.js

• Add Typed.js

Value Converters

• Add timeago.js with Persian support.

• Add Numeral.js

  Another candidate is Accounting.js

  Another candidate is Decimal.js

  Another candidate is autoNumeric

  Another candidate is currencyFormatter.js

• Add Humanize Plus and Humanize Duration with Persian support

• Add Persian.js and Rial.js

  We should write all the features with Typescript

• Add Showdown a Javascript Markdown to HTML converter

• Add Strman

  This library has some problems that need to be resolved.

Themes

• Create a theme manager to handle wide ranges of themes (light/dark).

• Synchronize theme components in light and dark colors.

  Some components have a problem with dark themes like Tokenize. I prefer to use CSS variables to handle them.

• Release specific theme for Aurelia-Toolbelt in light and dark mode. open color

Support Persian language

• Support Jalali date picker and date range.
• Support Bootstrap 4 RTL.
• Support National code validation.
• Convert numbers to words like js-written-number

Miscellaneous

• Replace moment.js with date-fns.

  Support Persian is so important.

• Autofill like jQuery form autofill

• A web-based json editor

• Support visual programming with Rete.js

• Admin Dashboard inspired by Metronic but with Bootstrap 4 theme.

• Support fake data generator based on faker.js

  Bogus is fundamentally a C# port of faker.js so it can be a good choice.

• Support Javascript URL mutation library

• Support Cross-browser storage

• Generate, parse and enhance JavaScript stack traces with Stacktrace.js

• Support UAParser.js

• Support Platform.js

• Support Nano ID

• Support link preview with Bootstrap cards like Microlink.js

• Replace Flatted with fast-safe-stringify

We do not support these components

The list of components that we do not support because they have very good equivalents.

1. Grid: Use vGrid
2. Dragula: Use aurelia-dragula
3. Leaflet: Use aurelia-leaflet
4. Charts: Use aurelia-charts
5. Cookie: Use aurelia-cookie
6. Google Recaptcha: Use aurelia-plugins-google-recaptcha

Scrollspy does not work properly when clicked on links to scroll to the associated content

Started using your great library and it's working great, however it would be even better if the Modal Component could have a dismiss(reason: any) (or close) method. As for example, I am working on a modal window that has a form and I need to be able to use the form data into the parent. For a better example, let say we have a user which create an item and once the item is saved, we close the modal window and we use the object returned by the server to refresh the grid (without refreshing the entire grid, we just add that 1 object to the grid via typescript).

I'm not totally sure on how to implement in your component but if we look at ng-bootstrap, they have the dismiss method. In their example, click on "Launch demo modal" and then click on the "Save" button and you will see the text "Closed with: Save click" appearing on the parent window via the dismiss(reason: any) method.

Currently your Modal Component can only be closed via the View, I don't see how to close the modal window in ViewModel (.ts) code.

For now, I guess I could do the same via an Event Aggregator, something like this.ea.publish('onItemCreated', this.item);, but that would be great if the Modal Component support the dismiss(reason: any) method internally.

Besides feeding a string url directly to the breadcrumb item, we should have an option to provide an Aurelia router routing config. The item should look something like this:

{
  title: string,
  url?: string,
  config?: {
    route: string,
    params?: {}
  }
}

Enable abt-dropdown component to be allowed to use outline just as abt-button

The abt-link-button control can be clicked when in disabled="true"

How to change the placement of dropdown opener to top or bottom. The default behaviour is bottom; however, when setting the navbar to fixed at the bottom of the page, I expect the dropdown to be opened upward.

<abt-navbar class="fixed-bottom" style="z-index:1021" class="bg-light">
...
...
</abt-navbar>

Example:

https://github.com/shahabganji/aurelia-toolbelt/blob/6a01114cfa8e1e211adb3b348e613d924df71001/src/components/bootstrap/toggle/abt-toggle.html#L1

As title, as click delegate on surrogate element will be overridden or override its consumer. click.trigger is safer.

This is a continuation of a post made in another issue (which is now closed).

Thanks for your nice explanation, I actually realized why I thought it wasn't working. It actually does work but the button of modal demo was actually simply shown as just text (not the look of a button, however the text was clickable), so the modal demo also needs the aurelia-toolbelt/components/bootstrap/button for it to show the same as the demo.

I don't want to make this simple issue become a long post of multiple subjects but I have another question. I would like to use the Button Groups as radio button, to make the user choose 1 option out of 3 options, however in your demo I don't see how to bind the checked value. I also cannot visually see which option is clicked, I'm not sure if that is a Bootstrap issue though

Your reply was

This feature of bootstrap is not implemented in toolbelt 🙈, because at the time of writing I had no idea whether it should be a mixed feature of abt-button or abt-button-group or another separate component. I would grateful if you could come up with a suggestion and will be more than happy to implement your proposal. if interested please open a new issue to track this feature.

New bundler: https://aurelia.io/docs/cli/cli-bundler

The getting started page is not very user-friendly.

We don't go through the painful details of how you should configure your aurelia-cli, webpack or fusebox. The plugin will work with all of them based on the basic configurations that you should know when using each.

To test it out, I created a new project with Aurelia CLI, which now uses webpack by default.
Then I ran yarn add aurelia-toolbelt, and added aurelia.use.plugin(PLATFORM.moduleName('aurelia-toolbelt')); as suggested. Then I ran aurelia run and immediately got errors, such as:

ERROR in ./node_modules/aurelia-toolbelt/dist/commonjs/components/jquery/block-ui/aut-block-ui.js
Module not found: Error: Can't resolve './SharedOptions' in '~/test/node_modules/aurelia-toolbelt/dist/commonjs/components/jquery/block-ui'

ERROR in ./node_modules/aurelia-toolbelt/dist/commonjs/components/jquery/metis-menu/aut-metis-menu.html
Module not found: Error: Can't resolve 'metismenu/dist/metismenu.css' in '~/test/node_modules/aurelia-toolbelt/dist/commonjs/components/jquery/metis-menu'

When we add .fixed-top to the abt-navbar, and then clicking on bt-navbar-dropdown-mega-item there is a gap between navbar and items to be shown.

Hi. Sorry to bring bad news, but the current npm package missing the dist directory.

Hi there, nice work you guys started here.
In order to make the getting started easier for Aurelia-CLI users, based on RequireJS and SystemJS, it would be helpful if your package.json could include the instructions for having dependencies automatically added. You can take a look here for an example

I downloaded the aut-webpack4-starter-kit and upgraded aurelia-toolbelt to version 1.1.1. As a result, now application throws few errors.

1. Uncaught TypeError: Cannot read property 'get' of undefined at

   aurelia-toolbelt/src/decorators/inject-css.ts

   Line 13 in 3df963a

   let loader: Loader = <Loader>container.get(Loader);

2. Unhandled rejection Error: Unable to find module with ID: aurelia-toolbelt/external-resources/css/toastr.css

If I limit the plugin registration to specific component (like .plugin(PLATFORM.moduleName("aurelia-toolbelt/components/bootstrap/dropdown"))), then it starts to complain about missing html files, for example Unhandled rejection Error: Unable to find module with ID: aurelia-toolbelt/components/bootstrap/dropdown/abt-dropdown.html

Hi,
I tring to incorporate aurelia-toolbelt into an existing project that is built with systemjs that features aurelia-slickgrid. I've found a working example using requirejs from the following post and all works as described. In my case I added the following to aurelia.json file

 {
            "name": "aurelia-toolbelt",
            "path": "../node_modules/aurelia-toolbelt/dist/amd",
            "main": "index",
           "deps": [
              "jquery"
            
            ]
          }

but when I run project I get the following error:

system.js:4 GET http://localhost:9000/aureliatoolbelt-thirdparty/jquery.blockUI/jquery.blockUI 404 (Not Found)

I've tried a few tweeks nut none successful.
Thanks,
John

An input control is almost useless without value binding. We should be able to write <abt-float-input value.bind="foo" required></abt-float-input> and eventually have ...<input value.bind="foo" required>...

Example:

https://github.com/shahabganji/aurelia-toolbelt/blob/6a01114cfa8e1e211adb3b348e613d924df71001/src/value-converters/purejs/array/order-by.ts#L14

This is a dangerous operation, two bindings using sort targeting the same array will cause infinite loop. I think it's more natural to have mutable op but we have to stick to immutability.