Aurelia-Toolbelt, What is next?

[HamedFathi]

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

[vegarringdal]

nice, tell me when u have started so I can get feedback how Aurelia vNext is.
If its bundler frendly then I want to update my vGrid too.
Just need to support fusebox bundler without any loaders :-)
This can be fun :-) been a long time since Ive touched the grid and Ive learned a lot last 12 months on other hobby projects.

[HamedFathi]

@vegarringdal

Thanks

tell me when u have started so I can get feedback how Aurelia vNext is.

We count on you, my friend :)

If its bundler frendly

I hope so, They promise me !

then I want to update my vGrid too.

We should create a Bootstrap 4 theme too

Just need to support fusebox bundler without any loaders :-)

You can ask them about supporting fusebox right now. (without any loaders, of course)

Ive learned a lot last 12 months on other hobby projects.

Believe me I know that :D

[HamedFathi]

@bigopon, @fkleuver

I need your advice. As you can see, I've created a huge and fairly complete list for the next version of Aurelia-Toolbelt. Our goal is to use Aurelia vNext. (Especially because of this)
What do you think? Do we use Aurelia vNext now or continue with vCurrent? I'm hesitant Which is the right choice?

[khuongduybui]

Have you considered https://www.ag-grid.com/ ?
It's the fastest grid implementation I've worked with so far.

EDIT: never mind, you are not working on grid.

[HamedFathi]

@khuongduybui
Thanks.

Aurelia-Toolbelt is completely free (MIT license) and will be. We are using just free libraries.
AFAIK, AG-Grid is not free. Am I right?

[vegarringdal]

@HamedFathi There is a free version too with less features/ not enterprise oriented features. (I do not know what features this is...)

[fkleuver]

@HamedFathi I would continue on vCurrent for now since we can't give an ETA on vNext yet. And by all means and purposes we intend to try to stay as backwards-compatible as possible. So any features you implement in vCurrent will just become extra compatibility tests for us which we can use to make migration easier for the whole community :)