Checklist - Githubissues

Agenda

[ ] We need an outside form to generate Spec for each component like the Vuetify issue system.
[ ] Align the names of components, attributes and etc for the whole package.
[ ] Encapsulate any feature of components.
[ ] Use the Aurelia logger to log anything.
[ ] Update site theme to something like official Bootstrap 4 or PrettyDocs
[ ] Add bootstrap-reboot.css to the package (If somebody needs legacy support)
[ ] Support Light and Dark Theme. It should be optional. (Global colors)
[ ] Design all possible layout like Metronic + blog layout
[ ] Use Day.js and Jalali Day.js for dates.
[x] Complete PasswordMeter functionality.
[ ] Use Dynamic Import.
[ ] Create a theme manager to handle a wide range 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 RTL
[ ] Support Keyboard
[ ] Support SSR
[ ] Support Mobile (Touch)
[ ] Support Dynamic Form Generator (JSON Schema based)
- Form controls
- Action menu
- Validation
- Help info
- Convert JSON/YAML settings to UI (like VS Code)
[ ] Support Font Awesome 5 or Bootstrap Icons
[ ] ~~CSS-in-JS with emotion~~
[ ] Use Prefix at
[ ] Support Global Size Setting (sm or md or lg)
[ ] Support CSS Reset Setting
[ ] Support WAI-ARIA Web Accessibility
[ ] Support A11y
[ ] Component Spec Maker + JSON Spec + JSON Linter
[ ] Make an option to remove Popover/Tooltip arrow. Sample
```
.popover .arrow {
display: none;
}
```

.tooltip .arrow { display: none; }

- [ ] Use Bootstrap v5 [Offcanvas](https://github.com/twbs/bootstrap/pull/29017) to make a `BottomSheet`

/ class="offcanvas offcanvas-bottom show offcanvas-bottom-sheet" /

.offcanvas-bottom-sheet { width: 30%; margin: 0 auto; }

![image](https://user-images.githubusercontent.com/8418700/90674666-ade57f00-e26e-11ea-9b4f-f945dbe383af.png)

- [ ] Add namespace for components like

Card Card.Header Card.Body

Accordion Accordion.Toggle Accordion.Collapse


- [ ] Categories (We don't support BSv4 and jQuery)
   * core
   * ~~bootstrap-v4-core~~
   * bootstrap-v5-core
   * ~~bootstrap-v4~~
   * bootstrap-v5
   * ~~bootstrap-v4-plus~~
   * bootstrap-v5-plus
   * ~~jquery~~
   * vanilla
   * custom-attributes
   * template-controllers
   * binding-behaviors
   * services
   * value-converters
   * persian-value-converters
   * dashboard
   * dashboard-cli
   * interactive-form-designer (drag & drop)
   * ts-utils
   * persian-ts-utils
   * polyfills
   * js-dependencies

## Components

* This section points to component changes.
* All components should possibly **assign value by a data source** for JSON-based form generators.

- [ ] Convert all Bootstrap 4.5+ functionality like [Vue Bootstrap 4](https://bootstrap-vue.js.org/) and [React Bootstrap 4](https://reactstrap.github.io/) + Gradient Progress Bar + Count down alert + Bottom Sheet Modal + Promise Buttons + Link preview + [TableFor](https://github.com/hunterae/vue-table-for)
- [x] Add [Wave effect](https://github.com/fians/Waves) to components or [CSS ripple effect](https://github.com/mladenplavsic/css-ripple-effect) or [JS/CSS Ripple Effect](https://jsfiddle.net/hamedfathi/70p1qw86/). It should be optional. (Custom attribute & High-order component)
- [ ] Add [Bootstrap Input with (left/right) side icon](https://jsfiddle.net/hamedfathi/xkszLd4t/)
- [ ] ~~Add [Modal Bottom Sheet Fullwidth](https://jsfiddle.net/hamedfathi/fbjmk4cd/)~~
- [ ] Add [Popup Horizontal/Vertical Toolbar](https://jsfiddle.net/df16ehsw/1/) like [Toolbar.Js](https://paulkinzett.github.io/toolbar/)
- [ ] Add [Navbar Menu](https://www.codeply.com/go/EuirMfjkYZ/bootstrap-4-multilevel-navbar) (Click and Hover)
- [ ] Add [Mega Menu](https://bootsnipp.com/snippets/orE6Z) (Click and Hover) like [Navbar4](http://navbar4.com) or [Mega Menu with hover](https://bootsnipp.com/snippets/rNaNR) or [Mega Dropdown Menu Navbar](https://codepen.io/JacobLett/pen/jaaQYG) or [Simple Bootstrap 4 Mega Menu](https://codepen.io/JakubHonisek/pen/xXaYqg)
- [ ] Add [Float Label](https://jsfiddle.net/e6gyupxq/) or [Floating Placeholders](https://jsfiddle.net/hamedfathi/g3sjpbtk/) or [float-labels.js](https://pryley.github.io/float-labels.js/) or [Bootstrap Floating label](https://jsfiddle.net/hamedfathi/6hut173s/). It should be optional. (Custom attribute & High-order component)
- [ ] Add [Tokenize](https://github.com/dragonofmercy/Tokenize2)
- [ ] Add [Nanobar](https://github.com/jacoborus/nanobar) with `HTTP interceptor`
- [ ] Add [Input Spinner](https://github.com/tkrotoff/bootstrap-input-spinner)
- [ ] Add [imaskjs](https://github.com/uNmAnNeR/imaskjs)
- [ ] Add [Fuse.js](https://github.com/krisk/Fuse) like [Angular fuse.js](https://github.com/maleblond/angular-fusejs) and [ng2-fuse](https://github.com/caiobsouza/ng2-fuse)
- [ ] Add [jQuery LoadingOverlay](https://gasparesganga.com/labs/jquery-loading-overlay/) or [GPU Loading Overlay](https://github.com/katmore/gpu-loading-overlay)
- [ ] Add [Bootstrap 4 Toggle](https://github.com/gitbrent/bootstrap4-toggle/) with [forbidden cursor](https://jsfiddle.net/k61pxs78/) in disable mode
- [ ] Add [Divided](https://bootsnipp.com/snippets/1eZNd) that supports `horizontal` and `vertical` alignment
- [ ] Add [Boostrap Task Board](https://jsfiddle.net/hamedfathi/kh325zxy/) or [Bootstrap Kanban Board](https://jsfiddle.net/hamedfathi/du45mtsq/) or [Bootstrap Project List](https://jsfiddle.net/hamedfathi/u765sepx/) or [Boostrap Project Grid](https://jsfiddle.net/hamedfathi/yev8gjpa/)
- [ ] Add [Price Table](https://jsfiddle.net/hamedfathi/va8er172/)
- [ ] Add [Price Tag](https://bootsnipp.com/snippets/0e5xd)
- [ ] Add [keypad](https://www.codeply.com/go/Pr7lPFJnVR/bootstrap-4-calculator-keypad) like [jQuery Keypad](http://keith-wood.name/keypad.html). It should be integrated with the `Password` component.
- [ ] Add [dPassword](https://css-tricks.com/better-password-inputs-iphone-style/) or [YouShallPass](https://github.com/HamedFathi/YouShallPass)
- [ ] Add [Spin kit](http://tobiasahlin.com/spinkit/) as a component like [ng-spin-kit](https://github.com/WoltersKluwerPL/ng-spin-kit)
- [ ] Add [QRCode.js](https://github.com/kazuhikoarase/qrcode-generator/)
- [ ] Add [Navbar Toggle Animations](https://www.codeply.com/go/O9SEb3KLOp/bootstrap-4-navbar-animated-toggle-hamburger-close) with [Hamburgers ](https://jonsuh.com/hamburgers/)
- [ ] Add [tui.editor](https://github.com/nhnent/tui.editor)
- [ ] Add [jsPanel4](https://github.com/Flyer53/jsPanel4) with Bootstrap 4 Theme.
- [ ] Add [Bootstrap Select](https://github.com/snapappointments/bootstrap-select/)  or [Slim Select](https://github.com/brianvoe/slim-select) or [Choices.js](https://github.com/jshjohnson/Choices) with [bootstrap4c-chosen](https://github.com/haubek/bootstrap4c-chosen) theme.
- [ ] Add [Dropzone](https://github.com/enyo/dropzone) with [bootstrap4c-dropzone](https://github.com/haubek/bootstrap4c-dropzone) theme.
- [ ] Add [Split.js](https://github.com/nathancahill/Split.js)
- [ ] ~~Add [Sidebar.js](https://github.com/SidebarJS/sidebarjs)~~
- [ ] Add [MetisMenu.js](https://github.com/onokumus/metismenujs) with Bootstrap 4 Theme or [Collapsing Sidebar Menu](https://bootsnipp.com/snippets/9kPoj) or [Multilevel Accordion Menu](https://codepen.io/geo2arc/pen/pJvEaK)
- [ ] Add [push.js](https://github.com/Nickersoft/push.js)
- [ ] Add [noUiSlider](https://github.com/leongersen/noUiSlider/)
- [ ] Add [Date picker](https://tempusdominus.github.io/bootstrap-4/) and [Another Date picker](https://github.com/monim67/bootstrap-datetimepicker)
- [ ] Add [Date picker with Range](https://github.com/dangrossman/daterangepicker)
- [ ] Add [Clock picker](https://github.com/weareoutman/clockpicker)
- [ ] Add [Time picker](https://codepen.io/ispal/pen/VmLOxy) - [MyImpl](https://jsfiddle.net/hamedfathi/q7956xmv/)
- [ ] Add [Glider](https://nickpiscitelli.github.io/Glider.js/)
- [ ] Add [OverlayScrollbars](https://github.com/KingSora/OverlayScrollbars)
- [ ] ~~Add [Snackbar](https://www.polonel.com/snackbar/) with Queue.~~
- [ ] Add [Cropper.js](https://github.com/fengyuanchen/cropperjs)
- [ ] Add [Image Zoom](https://github.com/jackmoore/zoom)
- [ ] Add [JsBarcode](https://github.com/lindell/JsBarcode)
- [ ] Add [jQuery Easy Ticker](https://www.aakashweb.com/demos/jquery-easy-ticker/)
- [ ] Add [Bootstrap News Box](https://github.com/gagi270683/jQuery-bootstrap) with Bootstrap 4.
- [ ] Add [jQuery Collapser](https://www.aakashweb.com/demos/jquery-collapser/)
- [ ] Add [jQuery News Ticker](http://www.jquerynewsticker.com/) with [Typed.js](https://github.com/mattboldt/typed.js/). or [Breaking News](https://jsfiddle.net/hamedfathi/mskhy4t3/) It should support RTL.
- [ ] Add [Typed.js](https://github.com/mattboldt/typed.js)
- [ ] Add [jQuery contextMenu](https://github.com/swisnl/jQuery-contextMenu)
- [x] Add `ScrollUp/ScrollDown` with [Zenscroll](https://github.com/zengabor/zenscroll)
- [ ] Add [CodeMirror](https://github.com/codemirror/codemirror)
- [ ] Add [Bootstrap Email](https://jsfiddle.net/hamedfathi/02uosyw1/) and [Email Box](https://jsfiddle.net/hamedfathi/o5dqgkv4/) and [Compose](https://jsfiddle.net/hamedfathi/6n7q08Lo/)
- [ ] Add [Bootstrap TouchSpin](https://www.virtuosoft.eu/code/bootstrap-touchspin/)
- [ ] Add [Bootstrap Confirmation](https://github.com/mistic100/Bootstrap-Confirmation)
- [ ] Add [jsTree](https://github.com/vakata/jstree) with Bootstrap 4 Theme and [jsTreeGrid](https://github.com/deitch/jstree-grid)
- [ ] Add [Dual Listbox](https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox)
- [ ] Add [Bootstrap Milestones](https://github.com/alexjab/bootstrap-milestones) (Responsive Timeline) or [Bootstrap Timeline](https://jsfiddle.net/hamedfathi/db1eks7a/) or [Tracking Timeline](https://bootsnipp.com/snippets/4Mzzm) or [Clear Timeline](https://jsfiddle.net/hamedfathi/9abvhf65/) or [Simple Timeline](https://codepen.io/Maxalos/pen/MXXqGj)
- [ ] Add [bs-stepper](https://github.com/Johann-S/bs-stepper)
- [ ] Add [Bootstrap pagination](https://github.com/josecebe/twbs-pagination)
- [ ] ~~Add [Select2](https://github.com/select2/select2) jQuery, With [Dependent / Cascading Select List](http://ajaxray.com/blog/select2-dependent-cascading-select-list-reload/) And [Floating Label](https://stackoverflow.com/questions/43046840/how-to-apply-floating-label-to-select2-dropdown) And [Bootstrap Theme](https://github.com/ttskch/select2-bootstrap4-theme)~~
- [ ] Add [jqPropertyGrid](https://github.com/ValYouW/jqPropertyGrid) with Bootstrap 4 Theme.
- [ ] Add [DomOutline](https://github.com/andrewchilds/jQuery.DomOutline/pull/9)
- [ ] Add [Mousetrap](https://github.com/ccampbell/mousetrap)
- [ ] Add [Bootstrap 4 Search Box](https://jsfiddle.net/hamedfathi/wg3y2jqk/)
- [ ] Add [Bootstrap 4 Dropdown Hover](https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover)
- [ ] Add [Slinky](http://alizahid.github.io/slinky/) with [Bootstrap 4 theme](https://github.com/hjemmesidekongen/slinky-bootstrap-theme)
- [ ] Add [lozad.js](https://github.com/ApoorvSaxena/lozad.js)
- [ ] Add [PhotoSwipe](https://github.com/dimsemenov/photoswipe)
- [ ] Add [x-spreadsheet](https://github.com/myliang/x-spreadsheet)
- [ ] Add [Signature Pad](https://github.com/szimek/signature_pad)
- [ ] Add [Gantt](https://frappe.io/gantt)
- [ ] Add [jQuery Comments](https://github.com/Viima/jquery-comments) or [Comment Form](https://bootsnipp.com/snippets/M5obX) or [Comment](https://jsfiddle.net/hamedfathi/umay20et/)
- [ ] Add [Apex Charts](https://apexcharts.com/)
- [ ] Add [roundSlider](https://github.com/soundar24/roundSlider)
- [ ] Add [ImageEditor](https://github.com/nhnent/tui.image-editor)
- [ ] Add [Bootstrap 4 Affix](https://www.codeply.com/go/LDHQhWUG0x) and [ScrollPos Styler](https://github.com/acch/scrollpos-styler)
- [ ] Add [Monaco Editor](https://github.com/Microsoft/monaco-editor)
- [ ] Add [CountUp](https://github.com/inorganik/CountUp.js)
- [ ] Add [Bootstrap circular progress bar](https://codepen.io/fuzzywalrus/pen/OxYENY)
- [ ] Add [Placeholder loading](https://github.com/zalog/placeholder-loading)
- [ ] Add [Long press click](https://codepen.io/thetallweeks/pen/uAEGr)
- [ ] Add [Timesheet.js](https://github.com/sbstjn/timesheet.js)
- [ ] Add [Bootstrap 4 Search Box](https://www.gungorbudak.com/blog/2018/12/12/bootstrap-4-search-box-with-search-icon/) and [Sample](https://codepen.io/gungorbudak/pen/ooKNpz) or [Sample 2](https://codepen.io/anon/pen/ZQdMKW)
- [ ] Add [Comment Box](https://codepen.io/magnus16/pen/buGiB)
- [ ] Add [Bootstrap Poll](https://bootsnipp.com/snippets/92jm) and [Statistics](https://bootsnipp.com/snippets/z118X) (Single/Multi Choices)
- [ ] Add [StickyBits](https://github.com/yowainwright/stickybits)
- [ ] Add [maxlength](https://github.com/mimo84/bootstrap-maxlength) works with Bootstrap 4 without any changes, use `badge` instead of `label`
- [ ] Add [bootstrap scrolling tabs](https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs)
- [ ] Add [List Filter](https://github.com/stefanocudini/bootstrap-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](https://github.com/Simonwep/pickr)
- [ ] Add [Bootstrap Tour](https://github.com/sorich87/bootstrap-tour)
- [ ] Add [Muuri](https://github.com/haltu/muuri) Or [Gridstack](https://github.com/gridstack/gridstack.js)
- [ ] Add [fullcalendar](https://github.com/fullcalendar/fullcalendar) with [Persian](https://github.com/Natico/fullcalendar-Jalaali/) support.
- [ ] Add [Virtual Keyboard](https://github.com/Mottie/Keyboard) with Bootstrap 4 theme. 
- [ ] Add [Bootstrap 4 Item Slider Responsive](https://bootsnipp.com/snippets/6XnDm)
- [ ] Add [Bootstrap 4 Forms](https://www.codeply.com/go/JVP2nxfv0p/bootstrap-4-form-examples)
- [ ] Add [Bootstrap ChatBox](https://bootsnipp.com/snippets/exR5v) or [Message ChatBox](https://jsfiddle.net/hamedfathi/tn85jehL/) or [Bootstrap Chat Template](https://bootsnipp.com/snippets/BxnxQ) or [Bootstrap Chat](https://jsfiddle.net/hamedfathi/znoqck0b/)
- [ ] ~~Add [Ladda](https://github.com/hakimel/Ladda) with [Bootstrap 4](https://github.com/HamedFathi/BootstrapInlineButtonLoader).~~
- [ ] Add [Krajee markdown editor](https://github.com/kartik-v/krajee-markdown-editor)
- [ ] Add [Krajee Bootstrap Popover X](https://github.com/kartik-v/bootstrap-popover-x)
- [ ] Add [Krajee Bootstrap Tabs X](https://github.com/kartik-v/bootstrap-tabs-x)
- [ ] Add [Krajee Bootstrap Star Rating](https://github.com/kartik-v/bootstrap-star-rating)
- [ ] Add [Bootstrap Tabdrop](https://github.com/jmschabdach/bootstrap-tabdrop)
- [ ] Add [Bricks.js](https://github.com/callmecavs/bricks.js)
- [ ] Add [Jodit Editor](https://github.com/xdan/jodit) or [Trumbowyg](https://github.com/Alex-D/Trumbowyg)
- [ ] Add ~~[Social Buttons](https://github.com/lipis/bootstrap-social)~~ Button with font icon option.
- [ ] Add [Simple reading time](https://codepen.io/balasubramanim/pen/xypRMP)
- [ ] Add [is-online](https://github.com/sindresorhus/is-online)
- [ ] Add [Bootstrap Timepicker](https://github.com/jdewit/bootstrap-timepicker)
- [ ] Add Bootstrap [Floating Action Button](https://jsfiddle.net/hamedfathi/rcq8dn5m/)
- [ ] Add Weather forecast
- [ ] Add [Player](https://github.com/sampotts/plyr)
- [ ] Add [Bootstrap Iconpicker](http://victor-valencia.github.io/bootstrap-iconpicker/)
- [ ] Add [Wheelnav.js](https://github.com/softwaretailoring/wheelnav)
- [ ] Add [Upvote.js](https://github.com/janosgyerik/upvotejs)
- [ ] Add [JSONFormatter](https://github.com/mohsen1/json-formatter-js)
- [ ] Add [xml-formatter](https://github.com/chrisbottin/xml-formatter)
- [ ] Add [Quote Block](https://bootsnipp.com/snippets/Bq909) or [Testimonial page](https://bootsnipp.com/snippets/PD8Nx) or [Bootstrap custom quote](https://jsfiddle.net/hamedfathi/dxnjLywf/) or [Simple Quote ](https://jsfiddle.net/hamedfathi/u5v3w10j/)
- [ ] Add [Humanize Duration](https://github.com/EvanHahn/HumanizeDuration.js)
- [ ] Add [Numeral.js](http://numeraljs.com/)
- [ ] Add [Accounting.js](http://openexchangerates.github.io/accounting.js/)
- [ ] Add [Voca.js](https://vocajs.com/)
- [ ] Add [Showdown](https://github.com/showdownjs/showdown) a JavaScript Markdown to HTML converter
- [ ] Add [js-written-number](https://github.com/yamadapc/js-written-number) with Persian support.
- [ ] Add [Rete.js](https://github.com/retejs/rete)
- [ ] Add [xState](https://github.com/davidkpiano/xstate)
- [ ] Add [Platform.js](https://github.com/bestiejs/platform.js/)
- [ ] Add [Hammer.js](https://github.com/hammerjs/hammer.js/)
- [ ] Add [Oribella](https://github.com/oribella/oribella)
- [ ] Add [jsDiff](https://github.com/kpdecker/jsdiff)
- [ ] Add [Clipboard.js](https://github.com/zenorocha/clipboard.js/)
- [ ] Add [MathJax](https://github.com/mathjax/MathJax)
- [ ] Add [Smooth-dnd](https://github.com/kutlugsahin/smooth-dnd)
- [ ] Add [Title Notifier.js](https://github.com/roshiro/TitleNotifier.js)
- [ ] Add [CSS Image Hover Effect](https://github.com/ciar4n/imagehover.css)
- [ ] Add [Base64.js](https://github.com/dankogai/js-base64)
- [ ] Add [JavaScript Cookie](https://github.com/js-cookie/js-cookie)
- [ ] Add [Animate on Scroll](https://github.com/michalsnik/aos)
- [ ] Add [Reveal.js](https://github.com/hakimel/reveal.js)
- [ ] Add [sanitize-html](https://github.com/punkave/sanitize-html)
- [ ] Add [Resumable.js](https://github.com/23/resumable.js)
- [ ] Add [DBFS Explorer](https://github.com/DataThirstLtd/DBFS-Explorer)
- [ ] Add [SlickGrid](https://github.com/6pac/SlickGrid) Or [DataTables](https://datatables.net/) Or [Tabulator](https://github.com/olifolkerd/tabulator)
- [ ] Add [DataView](https://primefaces.org/primeng/showcase/#/dataview)
- [ ] Add [OrderList](https://primefaces.org/primeng/showcase/#/orderlist)
- [ ] Add [OrganizationChart](https://primefaces.org/primeng/showcase/#/organizationchart)
- [ ] Add [TreeTable](https://primefaces.org/primeng/showcase/#/treetable)

aurelia-toolbelt / vNext

Checklist #1

Agenda